Angular-CLI全局scss文件

Question

如何在最新的Angular-CLI中添加全局scss变量（使用webpack）？

看起来像styles.scss中定义的全局变量在组件样式中不可用。

Answer 1

它们需要通过相对路径导入组件的SCSS文件。这将允许编译器找到必要的父文件进行处理。

Answer 2

我尝试使用其他全局样式文件variables.scss文件，发现有这样做的2种方法，但只有一个工作（角CLI 1.0.0 21）：

我添加了一个变量.scss文件和Assets文件夹下的site.scss文件。 site.scss中的一个属性引用变量集variables.scss中。

有两种方法可以包含全局样式。 1将import语句放入全局styles.scss。

第二种方法是将它们置于angular-cli.json中的Styles数组下。

当我做第一种方法时，我无法让网站中的变量工作（没有错误，只是不呈现）。

但是，当我将所有全局样式移动到angular-cli.json中时，它工作正常（这需要花费几个小时才能证明）。您仍然需要使用导入来引用兄弟文件，以便声明变量。我可以进入更详细，如果需要......

@import 'variables.scss'; 

Answer 3

您必须导入其中的变量是从组件文件的文件：

@import "XX/XX/XX/_name.scss"; 

XX是与变量的文件的相对路径

Answer 4

您必须在您尝试使用全局变量的每个组件的样式表中导入全局SCSS文件。 只是为了减少用相对路径编写导入路径的痛苦和沮丧。 您可以使用w.r.t根文件夹（SRC）

@import '~names.scss' 

注意绝对路径：这里假设被放置在NgApp的根目录下的顶部所需的全局样式它。 用“〜”加上文件名，告诉webpack的angular-cli它不是相对路径。

Answer 5

嘿，我通过使用这个webpack配置解决。因此，sass-loader可以获取“数据”选项，您可以在其中声明您的导入语句。

{ 
    test: /\.scss$/, 
    exclude: [/node_modules/, /styles/], 
    use: ['to-string-loader', 'css-loader', { 
     loader: 'sass-loader', options: { 
     sourceMap: true, 
     data: '@import "variables";', 
     includePaths: [ 
      path.join(__dirname, '../styles/sass/') 
     ] 
     } 
    }