如何修复 css 文件上的打字稿编译器错误? [英] How do I fix typescript compiler errors on css files?
问题描述
我正在尝试使用 webpack 创建一个带有打字稿的 React 项目.但我无法让 CSS 模块正常工作.尝试在打字稿中导入 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 和 CSS 模块结合使用,但我找不到任何有类似问题的人.
To me this looks like webpack is expecting the css file to contain valid typescript but I don't know for sure. I tried looking around and while a lot of people seem to be struggeling with using typescript and CSS modules together I couldn't find anyone with a similar issue.
我像这样导入了 CSS 文件:按钮.tsx
I imported the CSS file like this: Button.tsx
import React from "react";
import "./Button.module.css";
export class Button extends React.Component{
...
}
这是我要导入的 CSS 文件.Button.module.css:
And this is the CSS file that I'm trying to import. Button.module.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
The generated 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;
我也有一个名为 style.d.ts 的 css 模块的类型声明
I also have a type declaration for css modules called styles.d.ts
declare module "*.module.css" {
const classes: { [key: string]: string };
export default classes;
}
虽然 Webpack 似乎确实为 css 模块生成了一些类型,但对我来说它看起来很奇怪.我想我在 css-modules-typescript-loader 上做错了,我尝试了一堆可用的插件,但一直遇到同样的错误.
While Webpack does seem to generate some typings for the css module it looks weirdly empty to me. I think I doing something wrong with the css-modules-typescript-loader, I tried with a bunch of the avaliable plugins but keep running into the same error reguardless.
这是我在 webpack.config.ts 中配置的内容:
Here is what I configured in my 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
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"
],
}
推荐答案
我遇到了同样的问题.就我而言,这不是 webpack 的问题.这是 typescript-eslint 的问题.我通过添加*.css"解决了这个问题.在 .eslintignore 文件中.
I had same issue. In my case, it was not the webpack's problem. It was the problem of typescript-eslint. I solved the problem by adding "*.css" in .eslintignore file.
这篇关于如何修复 css 文件上的打字稿编译器错误?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!