css-loader / style-loader 的错误

【问题标题】：Bug with css-loader / style-loadercss-loader / style-loader 的错误
【发布时间】：2021-01-27 14:36:44
【问题描述】：

我在两台不同的 PC 上遇到了一个问题。对于我的项目，我为开发安装了以下依赖项：（webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader html-webpack-plugin）和反应和反应域。当我尝试在项目的任何组件中导入一些样式表时，问题就来了，错误是：import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag .js”；。我有点困惑，因为我检查了很多次自己完成的其他 webpack 配置，它们与我现在使用的相同。你有什么建议？谢谢！

【问题讨论】：

您将需要一个单独的加载器来导入样式表，例如postcss。
我试过了，但没用。在之前的项目中，我使用 css 和 webpack，从 react 组件中导入样式并且没有问题。还有其他想法吗？

标签： javascript reactjs webpack css-loader

【解决方案1】：

我遇到了这个问题，似乎 webpack 不允许样式 css 文件的多个定义。所以，为我解决这个问题的方法是从 angular.json 中的“样式”中删除 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']
      },

【讨论】：