如何修复css文件上的typescript编译器错误

Question

我正在尝试使用webpack创建一个带有typescript的React项目。但我无法让CSS模块正常工作。在尝试导入typescript中的CSS文件时，我一直收到这个错误：

ERROR in src/components/Button.module.css:1:0
[unknown]: Parsing error: Declaration or statement expected.
> 1 | .myButton {
2 |         box-shadow: 0px 0px 0px -1px #1c1b18;
3 |         background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
4 |         background-color:#eae0c2;
ℹ ｢wdm｣: Failed to compile.

对我来说，这看起来像是webpack希望css文件包含有效的typescript，但我不确定。我试着四处寻找，虽然很多人似乎都在努力将typescript和CSS模块结合使用，但我找不到有类似问题的人。

我导入的CSS文件如下：按钮.tsx

import React from "react";
import "./Button.module.css";
export class Button extends React.Component{
...
}

这是我试图导入的CSS文件。按钮模块.css:

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

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

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
}
export const cssExports: CssExports;
export default cssExports;

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

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

虽然Webpack似乎确实为css模块生成了一些类型，但对我来说，它看起来出奇地空。我认为我在css模块typescript加载程序上做了一些错误，我尝试了一些可用的插件，但总是遇到同样的错误。

以下是我在webpack.config.ts:中配置的内容

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

tsconfig.json

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

Answer 1

我也遇到了同样的问题。就我而言，这不是webpack的问题。这是打字的问题。我加了"*"就解决了这个问题。css"在.eslitingnore文件中。

Answer 2

将此行添加到.eslintrc.json

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

.eslintrc.js

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