Question

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

Answer 1

在styles文件夹中创建一个src文件夹，然后您可以将其中的所有内容导入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文件。

我希望这会有所帮助。

修改

正如评论中所指出的，请确保将styles.scss添加到styles文件中的angular-cli.json，否则它将无效。

Answer 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）

Answer 3

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

以下是我的一个项目的示例：（/。angular-cli.json） ... ＆＃34;样式＆＃34;：[ ＆＃34; styles.scss＆＃34 ;, ＆＃34; ../ node_modules /字体真棒/ SCSS /字体awesome.scss＆＃34 ;, ＆＃34; ../ node_modules / MDI / SCSS / materialdesignicons.scss＆＃34; ] ...

Answer 4

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

如果文件很多，我们可以使用@import "scss-file";

将这些scss文件导入到一个scss文件中

如果子组件不想使用该样式，那么我们也可以通过encapsulation

的component属性来处理它

另一种方法是：

stackoverflow.com/a/42865933/1876949

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

4 个答案: