Angular中如何为LIT（Web组件）导入SCSS？

问题背景 #

在Angular项目中开发Lit Web组件，尝试导入SCSS样式文件时出现构建失败，组件内部包含约50个嵌套的SCSS引用。

代码示例 #

import {
  CSSResultGroup,
  html,
  LitElement,
  PropertyValues,
  TemplateResult,
  unsafeCSS,
} from 'lit';
import cardStyle from './scss/card.scss';

构建错误信息 #

./src/web-components/cam-card/scss/card.scss:1:0 - Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> :host {
|   display: block;
|   position: relative;

解决步骤 #

1. 修正SCSS导入方式 #

Lit需要将编译后的CSS文本转为CSSResult类型，不能直接导入SCSS模块。需改用原始文本导入并配合unsafeCSS处理：

// 添加?raw后缀获取SCSS编译后的原始文本
import cardStyleText from './scss/card.scss?raw';
// 转为Lit可识别的CSSResult
const cardStyle = unsafeCSS(cardStyleText);

2. 调整Angular的样式加载配置 #

如果Angular默认的loader未处理?raw后缀的SCSS文件，需修改angular.json中的构建配置，确保sass-loader输出纯文本而非模块：
在projects.[your-project-name].architect.build.options下添加：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/web-components/cam-card/scss"
  ]
},
"webpackConfig": {
  "module": {
    "rules": [
      {
        "test": /\.scss$/,
        "use": [
          "raw-loader",
          "sass-loader"
        ],
        "exclude": /node_modules/
      }
    ]
  }
}

注：如果未安装raw-loader，需先执行npm install raw-loader --save-dev。

3. 配置tsconfig.json #

确保TypeScript能识别SCSS的默认导入和原始文本导入：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "types": ["node"]
  },
  "include": [
    "src/**/*"
  ]
}

如果需要SCSS类型声明支持，可安装@types/sass并添加到types数组中。

4. 优化嵌套SCSS引用 #

对于大量嵌套的SCSS文件，建议将所有依赖的SCSS打包为一个主文件后再导入，避免loader重复处理嵌套引用导致的问题。例如在card.scss中统一导入所有嵌套文件：

@import './nested1.scss';
@import './nested2.scss';
// ...其他嵌套文件

内容的提问来源于stack exchange，提问作者Mjeduar