webpack 样式加载器的错误

Question

我只想导入一个 css 文件（import './index.css'），但是样式加载器抛出错误：

jectStylesIntoStyleTag.js：74未捕获的RangeError：在对象的./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports（injectStylesIntoStyleTag.js：227）处的addModulesToDom（injectStylesIntoStyleTag.js：74）处的数组长度无效。 ./app/components/editor/index.css (index.css?033a:16) 在webpack_require (bootstrap:726) 在 fn (bootstrap:100) 在 Module../app/components/editor/index.jsx (index .jsx:1) 在webpack_require (bootstrap:726) 在 fn (bootstrap:100) 在 Module../app/main.js (main.js:1) 在webpack_require (bootstrap:726)

我不知道如何处理它，我的package.json：

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "webpack config lear",
  "main": "app/index.js",
  "scripts": {
    "test": "I don't know what this property means.",
    "build": "webpack --config build/webpack.prod.js",
    "dev": "webpack-dev-server --config build/webpack.dev.js"
  },
  "keywords": [
    "react",
    "typescript",
    "frontend",
    "blog",
    "project",
    "component"
  ],
  "author": "xuwentao93",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.7.4",
    "@typescript-eslint/eslint-plugin": "^2.13.0",
    "@typescript-eslint/parser": "^2.13.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^3.4.0",
    "cssnano": "^4.1.10",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0",
    "file-loader": "^5.0.2",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "speed-measure-webpack-plugin": "^1.3.1",
    "style-loader": "^1.1.1",
    "thread-loader": "^2.1.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.4"
  }
}

有人可以帮助我吗？

Answer 1

我遇到了同样的错误，几个小时后我意识到我的错误出在 css 加载器的正则表达式中，因为 css-loader 与 .sass 文件匹配

{
   test:/.scss$/, 
   use: ["style-loader"
         "css-loader",
         "sass-loader" ],
   test: /css$/, 
   use: ["style-loader",
         "css-loader"]
}

所以，我改变了这个表达，这解决了问题

{
   test:/.scss$/, 
   use: ["style-loader"
         "css-loader",
         "sass-loader" ],
   test: /\.css$/, 
   use: ["style-loader",
         "css-loader"]
}