带有css-loader的webpack-解析错误：“;”预期

问题描述

我正在用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]部分，我无法看到该位置。

装载机

这是怎么回事？

解决方法

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

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

,

指定正常工作的打字机/ React组合可能需要删除ForkTsCheckerWebpackPlugin，而不是删除eslint: { files: './src/**/*.{ts,tsx,js,jsx}',，

yourButtonID.setOnClickListener
{
     
val textView = findViewById<View>(R.id.yourTextViewID) as TextView
     
textView.setText(yourEditTextID.text.toString())
     
yourTextViewID.text!!.clear()

}

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