VS Code中Lit项目无法导入CSS文件的问题求助

数据老陈

2026-6-2

解决Lit项目导入CSS文件时的模块找不到错误

在搭建Lit项目时，导入CSS文件出现VS Code报错：

Cannot find module './styles/first-project.styles.css' or its corresponding type declarations

项目代码如下：

import { LitElement, html, css} from 'lit';
import { property, customElement } from 'lit/decorators.js';

const logo = new URL('../../assets/open-wc-logo.svg', import.meta.url).href;
import styles from './styles/first-project.styles.css'

@customElement('first-project')
export class FirstProject extends LitElement {
  @property({ type: String }) header = 'My app';

  static styles: CSSResultGroup = css`${styles}`;

  //Render and such...

解决方案

添加CSS类型声明文件
在项目中创建一个css.d.ts文件（放在根目录或styles文件夹均可），写入以下内容：
```
declare module '*.css' {
  const styles: string;
  export default styles;
}
```
这个文件会告诉TypeScript如何识别.css后缀的模块，将其解析为导出字符串的模块，消除类型报错。
配置tsconfig.json/jsconfig.json
如果使用TypeScript，确保tsconfig.json的include字段包含这个类型声明文件：
```
{
  "include": [
    "src/**/*",
    "css.d.ts" // 对应你的类型文件路径
  ]
}
```
如果是纯JavaScript项目，创建jsconfig.json并添加同样的include配置，同时确保compilerOptions设置正确：
```
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020",
    "moduleResolution": "node"
  },
  "include": ["src/**/*", "css.d.ts"]
}
```

使用Lit推荐的CSS导入方式
改用ES模块的import断言语法，无需额外类型声明：

// 替换原来的CSS导入语句
import styles from './styles/first-project.styles.css' assert { type: 'css' };

// 直接赋值给static styles，不需要再用css`${styles}`包裹
static styles = styles;

这种方式符合Lit的最佳实践，同时原生支持CSS模块的导入。