Блог

Я получаю синтаксическую ошибку в одном из моих css-файлов из редактора monaco в node_modules. Это неизвестная ошибка в слове:

 > 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
 

Однако у меня есть css-загрузчик, настроенный в моем webpack.config.js :

 
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-загрузчика:

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

Я не уверен, что не так с тем, что я делаю, поэтому мне интересно, есть ли еще один загрузчик, который мне нужно добавить webpack.config.js , или моя конфигурация неверна?

У меня была такая же проблема, попробуйте это:

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