Angular 6 SASS 嵌套在模块级别不起作用答案

【问题标题】：Angular 6 SASS nesting not working at module levelAngular 6 SASS 嵌套在模块级别不起作用
【发布时间】：2018-08-27 18:26:24
【问题描述】：

我正在开发 Angular 6 混合项目。通常我们在样式数组中添加 angular.json 中的 css 依赖文件。

"styles": [
     "src/styles.scss", 
     "./node_modules/css file"
 ],

当我遇到一些样式冲突时，我尝试使用父类将 node_modules css 文件嵌套在 styles.scss 中。

.parent-class {
  @import '~bootstrap/dist/css/bootstrap.css';
  @import "~/node_modules/xyz/styles/xyz.css";
  @import "~@aa/abc/styles/theme.css";
}

sass 建议的上述解决方案在这里不起作用，任何关于在使用 Angular 6 构建应用程序时全局嵌套的想法。

【问题讨论】：

我想您尝试导入 CSS 而不是 SASS 可能会导致问题。也许最好全局导入样式
像 Sergy 所说的那样，在类中导入并不是一个好习惯。如果你想要小代码块，你应该看看 sass 中的 mixins

标签： angular sass angular6

【解决方案1】：

您可以在 angular.json 文件中的“样式”下方添加它

        "stylePreprocessorOptions": {
          "includePaths": [
            "path to your sass files here such as src/scss"
          ]
        }

然后您可以将它们导入任何 sass 文件中，如下所示：

@import 'xyz.scss';

等

【讨论】：