Блог

Я использую модуль react-html5-camera-photo узла в своем проекте, чтобы сделать снимок с камеры. Библиотека требует, чтобы компонент использовал Camera компонент для импорта css файла ( react-html5-camera-photo/build/css/index.css ) для кнопок захвата стиля.

Даже после добавления import 'react-html5-camera-photo/build/css/index.css' в мой компонент react стили не применяются, и при проверке отображаемых элементов с помощью элемента inspect ни один из стилей не применяется из импортированного css файла.

Я попытался изменить webpack.config.js настройки, но безуспешно.

Вот мои webpack.config.js настройки

 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" }  ]  }  ]  }  

Но при такой настройке css-loader шоу Module build error

 ERROR in ../node_modules/react-html5-camera-photo/build/css/index.css Module build failed (from ../node_modules/css-loader/dist/cjs.js): CssSyntaxError  (2:7) node_modulesreact-html5-camera-photobuildcssindex.css Unknown word   1 |  gt; 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-24  webpack 5.64.0 compiled with 1 error in 29408 ms  

Заранее спасибо,

Я предполагаю, что проблема react-html5-camera-photobuildcssindex.css была обработана css-loader дважды из-за соблюдения правил дважды, поэтому я думаю, что ваша проблема может быть решена только exclude react-html5-camera-photo с помощью 2-го правила следующим образом:

 [  {  test: /react-html5-camera-photo(.*?).css$/,  use: [  // ...   ]  },  {  test: /.(scss|css)$/,  // exclude your above rule to avoid processing twice  exclude: /react-html5-camera-photo(.*?).css$/,  use: [  // ...  ]  } ]