Question

我正在尝试使用sass在angular2应用程序中构建颜色主题功能。我的header.component.scss文件是：

$head-color: #f11;
h1{
    color: $head-color;
}

我在根目录中创建了一个文件webpack.common.js，并在其中添加了以下内容：

const webpack = require('webpack');
module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      }
    ]
  }
};

我的标题以默认黑色显示。但是，如果我将scss文件更改为以下，则显示为红色。

h1{
    color: #f11;
}

所以基本上我无法为变量分配动态值。任何对此有所了解的人都会分享。 TIA

Answer 1

而不是使用styleUrls使用样式并将文件转换为字符串。

styles: [require('./header.component.scss').toString()]

对于你的webpack配置，我认为你需要很多加载器。我相信你应该能够

'raw-loader!sass-loader'

我当前的配置是：

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loader: 'raw-loader!postcss-loader!sass-loader'
},

Answer 2

您使用StyleUrls代替Styles

按styleUrls: ['app/header/header.component.scss']

更改styles: [ String(require('./header.component.scss')) ]

查看更多https://stackoverflow.com/a/38349028/689429

必要时更新您的错误

Answer 3

现有package.json所在的项目文件夹中的命令行：npm install node-sass sass-loader raw-loader --save-dev

在webpack.common.js中，搜索＆＃34;加载器：＆＃34;并将此对象添加到loaders数组的末尾（不要忘记在前一个对象的末尾添加逗号）：

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

然后在你的组件中：

@Component({
  styleUrls: ['./filename.scss'],
})

如果您需要全局CSS支持，那么在顶级组件（可能是app.component.ts）上删除封装并包含SCSS：

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

Answer 4

在我自己的项目中，这就是我所使用的。

<强>形状automobile.component.ts

@Component({
    selector: 'form-automobile',
    templateUrl: './form-automobile.component.html',
    styleUrls: ['./form-automobile.component.scss'],
})

<强>形状automobile.component.scss

$myuglycolor: lime;

label {
    width: 100%;
    background-color: $myuglycolor
}

<强> webpack.config.common.js

{
    // Load component styles here. When loaded with styleUrls in component, array of string of styles is expected.
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: ['css-to-string-loader','css-loader','sass-loader']
}

如何在角度应用中使用SASS / SCSS

4 个答案: