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

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 ）