在 Angular 应用程序中混合 less 和 sass 文件

Question

我正在使用 ng-zorro 组件库构建一个 Angular 应用程序。通常，我还会为一些实用程序（例如网格系统和间距类）导入整个 Bootstrap css 文件，我发现这些实用程序非常有用。在我之前的所有经验中，我都遇到过 ng-zorro css 和 boostrap css 生成的冲突问题，因此，对于这个项目，我只想导入我需要的 Boostrap css 类。

通过阅读官方文档，我学会了如何使用 SCSS 从 Bootstrap 导入特定包（例如

@import "../node_modules/bootstrap/scss/utilities"; 

）。

因此，我有一个包含 ng-zorro 组件自定义主题的 .less 文件和一个包含 Bootstrap 特定实用程序类的 .scss 文件。问题是 Bootstrap scss 文件实际上似乎无法被组件看到。

知道我使用 Angular CLI 设置项目可能会有所帮助，当被问及我想要该项目的 css 文件时，我选择了 less。我选择的原因是 ng-zorro 服装主题必须用 .less 编写，我想知道是否有办法告诉 Angular 编译器同时使用 .less 和 .scss。

Answer 1

我认为你使用什么样式子语言并不重要，你只需要避免在CSS文件中编码它，你有两种选择。

• 在 angular.json 中，

  styles

  数组，Angular 将同时解析

  less

  和

  scss

• 在

  @Component

  装饰器的 styles 数组中，Angular 会同时解析

  less

  和

  scss

下面是一个 stackblitz，具有角度解析多种 css 类型

 ...
 "options": {
            "assets": [],
            "index": "src/index.html",
            "browser": "src/main.ts",
            "outputPath": "dist/demo",
            "scripts": [],
            "styles": [
              "src/global_styles.css",
              "src/global_styles.scss",
              "src/global_styles.less"
            ],
            ...

堆栈闪电战