Angular项目中同时兼容Less与Sass文件的配置及样式生效问题

1. 修改Angular配置文件angular.json #

打开项目根目录的angular.json，找到对应项目的构建配置节点，添加对两种预处理器的支持：

• 在projects -> [你的项目名称] -> architect -> build -> options中，新增stylePreprocessorOptions配置（可选，用于简化导入路径），并在styles数组中同时引入Less主文件和Sass工具类文件：

"stylePreprocessorOptions": {
  "includePaths": [
    "node_modules/bootstrap/scss",
    "node_modules/ng-zorro-antd/src/style"
  ]
},
"styles": [
  "src/styles.less", // ng-zorro主题自定义的主Less文件
  "src/bootstrap-utils.scss" // 仅导入Bootstrap工具类的Sass文件
],

• 同步在projects -> [你的项目名称] -> architect -> test -> options下添加相同的stylePreprocessorOptions，保证测试环境编译正常。

2. 安装Sass依赖 #

由于Angular默认可能未安装Sass编译器，执行以下命令安装：

npm install sass --save-dev

3. 正确编写Bootstrap工具类导入文件 #

在src/bootstrap-utils.scss中仅导入所需的Bootstrap工具类，避免全量引入引发样式冲突：

// 导入全部工具类
@import "utilities";

// 或按需导入指定类别，比如仅间距和颜色工具
// @import "utilities/spacing";
// @import "utilities/colors";

4. 组件级样式的多格式支持（可选） #

若需在单个组件中同时使用Less和Sass样式，可在组件装饰器中明确指定不同格式的样式文件：

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: [
    './demo.component.less',
    './demo.component.scss'
  ]
})

关键注意事项 #

• ng-zorro的Less自定义主题不受影响，Angular会分别编译Less和Sass文件，二者互不干扰。
• 尽量避免在同一组件中混合使用两种样式预处理器，保持文件格式一致性以降低维护成本。

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