我react-html5-camera-photo在我的專案中使用節點模塊從相機拍攝照片。該庫要求使用該Camera組件的組件匯入css檔案 ( react-html5-camera-photo/build/css/index.css) 以設定捕獲按鈕的樣式。
即使在添加import 'react-html5-camera-photo/build/css/index.css'到我的 react 組件之后，也不會應用樣式，并且在通過檢查元素檢查渲染元素時，匯入的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_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-24
webpack 5.64.0 compiled with 1 error in 29408 ms
提前致謝，
uj5u.com熱心網友回復：
我猜這個問題是由于兩次滿足規則而react-html5-camera-photo\build\css\index.css被處理css-loader兩次，所以我認為你的問題可以通過exclude react-html5-camera-photo第二條規則解決，如下所示：
[
{
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: [
// ...
]
}
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/358416.html