Angular-CLI Sass

Question

我使用最新版本的Angular-CLI来创建Angular2项目。 我在src / assets / styles / _vars.scss中有一个包含变量的sass文件。 是否可以配置sass编译器，所以我只需要编写

@import "vars";

而不是写出完整的路径或相对路径？

Answer 1

你很幸运。 看到这个pr 。

作为使用sass的示例，您需要在angular-cli.json应用程序配置中添加stylePreprocessorOptions对象。 例如：

"apps": [
    {
        "stylePreprocessorOptions": {
            "includePaths": [
                "styles" // This would point to the `my-app/src/styles` directory
            ]
        }
    }
]

从这里开始，如果你有一个scss文件，比如my-app/src/styles/_vars.scss ，你可以

@import 'vars'

跨您的应用程序scss文件。

只需记住将angular-cli更新为至少1.0.0-beta.26 。

Answer 2

使用stylePreprocessorOptions是一个选项，我相信这是一个旧的解决方法/功能。

现在你可以像这样使用波浪符~符号：

@import '~variables';

我不会导入_underscore文件，而是有一个入口点，可以在一个文件中提供可能的进一步内部结构，想想mixins，fonts，colors ......

所以在你的情况下它会是这样的：

@import '~assets/styles/main.scss';