如何在 angular-cli 项目中使用全局 scss 文件答案

【问题标题】：How to use global scss files in angular-cli project如何在 angular-cli 项目中使用全局 scss 文件
【发布时间】：2017-08-22 13:41:51
【问题描述】：

我是 Angular 4 和 Angular-CLI 的新手。我找不到任何解决方案如何为整个应用程序使用根 scss/css 文件。因此，我的问题是，如何在项目中使用全局 scss 文件？

【问题讨论】：

stackoverflow.com/a/42865933/1876949

标签： angular sass angular-cli

【解决方案1】：

在src 文件夹中创建一个styles 文件夹，然后您可以将那里的所有内容导入styles.scss，它也在src 文件夹中。这是我的样子：

// Vendors
@import './styles/vendors/_exports';

// Utils
@import './styles/utils/_exports';

// Globals
@import './styles/globals/_exports';

// Partials
@import './styles/partials/_exports';

// Components
@import './styles/components/_exports';

每个_exports 文件都会导入特定文件夹中的所有文件，以便更轻松地将其导入styles.scss 文件。

我希望这会有所帮助。

编辑：

正如 cmets 中所指出的，确保将 styles.scss 添加到 angular-cli.json 文件中的 styles，否则它将不起作用。

【讨论】：

谢谢 :-) @Chrillewoodz
@EdgarQuintero 不要仅仅因为你做错了就投反对票。您是否已将styles.scss 文件添加到角度cli json 文件的styles 数组中？并确保您的项目使用 SCSS 而不是 CSS？
对不起，我不得不修改 .angular-cli.json 以包含文件夹 src/styles/ 文件夹，它开始正常工作。 "styles": ["styles.scss", "styles/variables.scss"],
@EdgarQuintero 很高兴听到它现在有效。介意删除反对票吗？
当然，我建议您使用该详细信息更新您的答案。 :)

【解决方案2】：

您需要将以下代码添加到 angular-cli.json （A6+ 上的 angular.json）

"stylePreprocessorOptions": {
    "includePaths": [
      "../src/assets/scss/base"
    ]
  },

其中base 是包含您要@import 的文件的文件夹。

那么你就可以了

// BEFORE
@import '../../100TIMES/variables';
// NOW
@import 'variables'; // src/assets/scss/base/_variables.scss

谢谢。

注意：您需要重新构建项目以重新加载 angular-cli.json （A6+ 上的 angular.json）

【讨论】：

【解决方案3】：

您还可以选择将您的 css/scss 文件添加到 .angular-cli.json 文件中的“styles”数组中。这样做可能会破坏“最佳实践” - 我不太确定规则。但是，如果您在该数组中包含一个文件，它将被注入，就好像它是在 index.html 的顶部加载的一样。

这是我的一个项目中的一个示例：(/.angular-cli.json) ... “风格”：[ “样式.scss”， "../node_modules/font-awesome/scss/font-awesome.scss", “../node_modules/mdi/scss/materialdesignicons.scss” ], ...

【讨论】：

请注意，我的src 文件夹中有style.css（不是.scss），如果我在style.css 文件中包含SCSS 文件，它不会出错但不会编译为SCSS .一旦我更新了/.angular-cli.json 以使用style.scss，它就会正确编译它们。

【解决方案4】：

最简单的方法是在最根的组件中加载scss文件，这样所有的子组件都会得到样式。

如果文件很多，我们可以使用@import "scss-file";将这些scss文件导入到一个scss文件中

如果子组件不想使用该样式，那么我们也可以通过component 的encapsulation 属性来处理它

另一种方法是：

stackoverflow.com/a/42865933/1876949

【讨论】：