webpack with css-loader - Parsing error: ';' expected

Question

我正在用 React 开始我的第一个项目。

首先，我只有一个成分 LikeButton.tsx，它被注入体内。我正在尝试将一些样式应用于此按钮：

import './LikeButton.css';

LikeButton.css:

button {
    color: red;
}

这是我的webpack.config.ts:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx|tsx|ts)$/,
                exclude: /(node_modules|dist)/,
                use: 'babel-loader'
            }, {
                test: /\.css$/i,
                use: [
                    'style-loader', 'css-loader'
                ]
            }
        ]
    },
    ...
};

当我运行 webpack 时，我得到以下错误：

ERROR in src/components/LikeButton.css:1:7
[unknown]: Parsing error: ';' expected.
  > 1 | button {
      |       ^
    2 |     color: red;
    3 | }

css 语法是正确的，所以我猜测 css 在某处被解释为 javascript/typescript，但由于 [unknown]- 我看不到哪里错误消息中的一部分。

装载机

这里发生了什么？

Answer 1

是 Fork TS Checker Webpack 插件 导致了这个问题。通过在 webpack.config.ts 中将其从 module.exports.plugins 中删除，错误消失了：


module.exports = {
...
plugins: [
        new ForkTsCheckerWebpackPlugin({
            async: false,
            eslint: {
                files: "./src/**/*",
            },
        }),
        new MiniCssExtractPlugin(),
    ],
}
...

Answer 2

而不是删除 ForkTsCheckerWebpackPlugin 当然您可能需要 typescript / React 组合才能正常工作，而是指定您希望 eslint 检查的文件

eslint: {
             files: './src/**/*.{ts,tsx,js,jsx}',
          },

这告诉 eslint 只检查 javascript 和打字稿文件，从而消除 css 错误。

webpack with css-loader - Parsing error: ';' expected

webpack with css-loader - Parsing error: ';' expected

css

reactjs

webpack

css-loader