带有 css-loader 的 webpack - 解析错误：';'预期的答案

【问题标题】：webpack with css-loader - Parsing error: ';' expected带有 css-loader 的 webpack - 解析错误：';'预期的
【发布时间】：2020-12-15 04:09:50
【问题描述】：

我正在使用 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]-part，我看不到哪里。

加载器

这里发生了什么？

【问题讨论】：

标签： css reactjs webpack css-loader

【解决方案1】：

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


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

【讨论】：

您可以指定文件类型，而不是删除插件，它将由它检查。喜欢files: "./src/**/*.tsx"。

【解决方案2】：

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

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

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

【讨论】：