如何修复 css 文件上的打字稿编译器错误？

Question

我正在尝试使用 webpack 使用 typescript 创建一个 React 项目。但我无法让 CSS 模块正常工作。尝试在打字稿中导入 CSS 文件时，我不断收到此错误：

\n

ERROR in src/components/Button.module.css:1:0\n[unknown]: Parsing error: Declaration or statement expected.\n  > 1 | .myButton {\n    2 |         box-shadow: 0px 0px 0px -1px #1c1b18;\n    3 |         background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);\n    4 |         background-color:#eae0c2;\n\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: Failed to compile.\n

\n

对我来说，这看起来像 webpack 期望 css 文件包含有效的打字稿，但我不确定。我尝试环顾四周，虽然很多人似乎都在努力同时使用 typescript 和 CSS 模块，但我找不到任何有类似问题的人。

\n

我像这样导入了 CSS 文件：\nButton.tsx

\n

import React from "react";\nimport "./Button.module.css";\n\nexport class Button extends React.Component{\n...\n}\n

\n

这是我尝试导入的 CSS 文件。\nButton.module.css：

\n

.myButton {\n    box-shadow: 0px 0px 0px -1px #1c1b18;\n    background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);\n    background-color:#eae0c2;\n    border-radius:22px;\n    border:4px solid #706752;\n    display:inline-block;\n    cursor:pointer;\n    color:#505739;\n    font-family:Arial;\n    font-size:16px;\n    font-weight:bold;\n    padding:11px 22px;\n    text-decoration:none;\n    text-shadow:0px 1px 0px #ffffff;\n}\n.myButton:hover {\n    background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);\n    background-color:#ccc2a6;\n}\n.myButton:active {\n    position:relative;\n    top:1px;\n}\n

\n

生成的Button.module.css.d.ts

\n

// This file is automatically generated.\n// Please do not change this file!\ninterface CssExports {\n\n}\nexport const cssExports: CssExports;\nexport default cssExports;\n

\n

我还有一个名为 styles.d.ts 的 css 模块类型声明

\n

declare module "*.module.css" {\n    const classes: { [key: string]: string };\n    export default classes;\n}\n

\n

虽然 Webpack 似乎确实为 css 模块生成了一些类型，但对我来说它看起来很奇怪是空的。我认为我在 css-modules-typescript-loader 上做错了什么，我尝试了一堆可用的插件，但毫无顾忌地不断遇到相同的错误。

\n

这是我在 webpack.config.ts 中配置的内容：

\n

import webpack from "webpack";\n\nconst config: webpack.Configuration = {\n  entry: "./src/index.tsx",\n  resolve: {\n    extensions: [".tsx", ".ts", ".js", ".css"],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.module.css$/,\n        use: [\n          "css-modules-typescript-loader",\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n              sourceMap: true,\n            }\n          },\n        ]\n      },\n      {\n        test: /\\.(ts|js)x?$/,\n        exclude: /node_modules/,\n        use: {\n          loader: "babel-loader",\n          options: {\n            presets: [\n              "@babel/preset-env",\n              "@babel/preset-react",\n              "@babel/preset-typescript",\n            ],\n          },\n        },\n      },\n    ],\n  },\n

\n

tsconfig.json

\n

{\n  "compilerOptions": {\n    "lib": [\n      "dom",\n      "dom.iterable",\n      "esnext"\n    ],\n    "allowJs": true,\n    "allowSyntheticDefaultImports": true,\n    "skipLibCheck": true,\n    "esModuleInterop": true,\n    "strict": true,\n    "forceConsistentCasingInFileNames": true,\n    "moduleResolution": "node",\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "noEmit": true,\n    "jsx": "react",\n    "target": "ES5",\n    "plugins": [\n      {\n        "name": "typescript-plugin-css-modules"\n      }\n    ]\n  },\n  "include": [\n    "src"\n  ],\n}\n

\n

Answer 1

我有同样的问题。就我而言，这不是 webpack 的问题。这是 typescript-eslint 的问题。我通过在 .eslintignore 文件中添加“*.css”解决了该问题。

Answer 2

将此行添加到 .eslintrc.json

  {
    ...
    "ignorePatterns": ["**/*.css","**/*.scss"]
  }

.eslintrc.js

module.exports = {
    ...
    ignorePatterns: ["**/*.css", "**/*.scss"],
};