即使使用 css-loader，CSS 文件中也会出现未知单词错误

Question

我在 node_modules 中的 monaco-editor 的一个 css 文件中遇到语法错误。这是一个未知单词错误：

> 1 | // Imports
    | ^
  2 | import ___CSS_LOADER_API_IMPORT___ from "../../../../../../css-loader/dist/runtime/api.js";
  3 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 @ ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css 2:12-317 9:17-24 13:15-29

但是，我在我的

webpack.config.js

中配置了css-loader：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const PerspectivePlugin = require("@finos/perspective-webpack-plugin");
const path = require("path");
const plugins = [
  new HtmlWebPackPlugin({
    title: "Perspective React Example",
    template: "./src/frontend/index.html",
  }),
  new PerspectivePlugin(),
];
module.exports = {
  context: path.resolve(__dirname),
  entry: "./src/frontend/index.tsx",
  mode: "development",
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },

  plugins: plugins,

  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        //exclude: /node_modules/,
        loader: "ts-loader",
      },
      {
        test: /\.css$/,
        //exclude: /node_modules/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          'postcss-loader'
        ],
      },
    ],
  },
  devServer: {
    // superstore.arrow is served from here
    contentBase: [
      path.join(__dirname, "dist"),
      path.join(__dirname, "node_modules/superstore-arrow"),
    ],
  },
  experiments: {
    executeModule: true,
    syncWebAssembly: true,
    asyncWebAssembly: true,
  },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
};

我还有一个 postcss-loader 的配置文件：

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  };

我不确定我正在做的事情出了什么问题，所以我想知道是否需要添加另一个加载程序到

webpack.config.js

或者我的配置是否不正确？

Answer 1

我有同样的问题，试试这个：

use: [
  "style-loader",
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [
          [
            "postcss-preset-env",
            {
              // Options
            },
          ],
        ],
      },
    },
  },
],