I'm using the react-html5-camera-photo
node module in my project to take a photo from the camera. The library requires the component using the Camera
component to import a css
file (react-html5-camera-photo/build/css/index.css
) to style capture buttons.
Even after adding import 'react-html5-camera-photo/build/css/index.css'
into my react component, the styles are not applied and on checking the rendered elements through inspect element none of the styles are applied from the imported css
file.
I tried changing my webpack.config.js
settings but had no success.
Here are my webpack.config.js
settings
module: { rules: [ { test: /react\-html5\-camera\-photo(.*?)\.css$/, use: [ { loader: "css-loader", options:{ modules: false }} ] }, { test: /\.(scss|css)$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true, }}, { loader: "sass-loader" } ] } ] }
But with this setting, the css-loader
shows Module build error
ERROR in ../node_modules/react-html5-camera-photo/build/css/index.cssModule build failed (from ../node_modules/css-loader/dist/cjs.js):CssSyntaxError(2:7) \node_modules\react-html5-camera-photo\build\css\index.css Unknown word 1 | > 2 | import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"; | ^ 3 | import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js"; 4 | import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js"; @ ./components/OnsiteSituation/OnsiteSituation.tsx 84:0-54 @ ./components/ServiceLead/ServiceLead.tsx 47:0-65 79:803-818 @ ./App.tsx 33:0-63 45:370-381 @ ./index.tsx 3:0-26 8:21-24webpack 5.64.0 compiled with 1 error in 29408 ms
Thanks in advance,