Angular 2 中的 scss 变量答案

【问题标题】：scss variable in Angular 2Angular 2 中的 scss 变量
【发布时间】：2016-08-20 04:59:56
【问题描述】：

我正在使用 Angular 2 + webpack + scss。由于某种原因，我不能使用 scss 变量：

 $white: #fff;
.test{
 color: $white;
}

在样式控制台中，我看到未设置颜色（删除线）。

我的 webpack 配置：

module: {
loaders: [
  { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: ['raw-loader', 'sass-loader']
  }
]

有人知道它可能是什么吗？

【问题讨论】：

不，我只是创建一个示例
您查看编译后的 CSS 了吗？
{ test: /^((?!materialize).)*\.css$/, loader: 'raw-loader' }
这不可能是您的 CSS，您确定您查看的是正确的文件吗？
我的想象力很糟糕，webpack 做 scss 魔法。我配置 webpack，因为它提供了there。而且我根本没有css文件。

标签： sass angular webpack

【解决方案1】：

您的 webpack 配置中有语法错误。你必须使用loaders 而不是loader！见：https://webpack.github.io/docs/configuration.html#module-loaders

module: {
loaders: [
  { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader'] // loaders not loader
  }
]

【讨论】：

这究竟是如何回答这个问题的？您是否能够重现 OP 的问题？这是如何解决的？
webpack 配置的语法错误。见webpack.github.io/docs/configuration.html#module-loaders
所以换句话说，你应该投票关闭它作为一个印刷错误，是吗？
如果出现语法错误，是否有关闭问题的选项？
是的，“题外话，因为...” > “这个问题是由无法再复制的问题或简单的印刷错误引起的。”。如果您还留下评论指出错字在哪里，这通常会有所帮助，以帮助未来的选民也看到错误。（请注意，OP 在发布带有问题的代码时已经犯了一个错误。）

【解决方案2】：

如果样式在您的浏览器中被划掉，则意味着 scss 正在做它需要做的事情，但其他样式对于您尝试更改的相同属性具有更高的选择器特异性。

【讨论】：

我不想改变任何东西。只需创建 scss 变量并在测试类中使用它。