Question

我正在使用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']
  }
]

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

Answer 1

如果在浏览器中划掉样式，则表示scss正在执行它需要执行的操作，但其他样式对于您尝试更改的相同属性具有更高的选择器特异性。

Answer 2

您的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
  }
]

Angular 2中的scss变量

2 个答案: