css-loader / style-loader存在错误。

Question

我在两台不同的电脑上遇到了同样的问题。为了进行开发，我安装了以下依赖项：(webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader html-webpack-plugin)以及react和react-dom。问题出现在当我尝试在项目的任何组件中导入样式表时，出现了以下错误：import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";。我有点困惑，因为我多次检查了我自己完成的其他webpack配置，并且它们与我现在使用的相同。你有什么建议吗？谢谢！

- ignaciomartin

---

你需要一个单独的加载器来导入样式表，例如postcss。 - tscpp

我尝试过，但它没有起作用。在以前的项目中，我使用了CSS和Webpack，并从React组件中导入样式，没有任何问题。还有其他想法吗？ - ignaciomartin

Answer 1

我遇到了这个问题，似乎webpack不允许多次定义样式CSS文件。 所以，解决我的问题的方法是从angular.json中的“styles”中删除CSS文件。

    //....
    "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "outputPath": "dist/app-name",
        "index": "src/index.html",
        "main": "src/app/main.ts",
        "polyfills": "src/app/polyfills.ts",
        "tsConfig": "tsconfig.json",
        "preserveSymlinks": true,
        "assets": [
          "src/client/img"
        ],
        "styles": [], //don't mention your styles.css here
        "scripts": [],
        //....

webpack.config.js 应该包含所需的加载器，这样就足够了。

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

- Yossi