时间戳

首页 > 解决方案 > 带有 css-loader 的 webpack - 解析错误：';' 预期的

css - 带有 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]错误消息中的 -part，我看不到哪里。

装载机

这里发生了什么？

标签： cssreactjswebpackcss-loader

解决方案

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

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

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

推荐阅读