Angular-CLI Sass

Question

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

@import "vars";

不要写出完整路径或相对路径？

- Arkuni

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。

- Brandon Silva

Answer 2

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

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

@import '~variables';

我不会导入下划线文件，而是使用一个入口点，在一个文件中提供可能的进一步内部结构，比如混合、字体、颜色等。

因此，在你的情况下，应该像这样：

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

- hogan