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

我正在尝试使用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

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

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

对于你的网页配置，我认为你有很多加载器。我相信你应该能够

'raw-loader!sass-loader' 

我当前的配置是：

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

---

您使用的是

styleurl

而不是

Styles

更改

styleURL:['app/header/header.component.scss']

by

styles:[String（require（'./header.component.scss'））]

看更多

---

如有必要，更新您的错误

现有package.json所在的项目文件夹中的命令行：

npm安装节点sass sass loader raw loader--save dev

在webpack.common.js中，搜索“loaders:”并将此对象添加到loaders数组的末尾（不要忘记在前一个对象的末尾添加逗号）：

然后在组件中：

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

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

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

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

---

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

形成automobile.component.ts

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

$myuglycolor: lime;

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

{
    // 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']
}

形成automobile.component.scss

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

$myuglycolor: lime;

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

{
    // 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']
}

webpack.config.common.js

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

$myuglycolor: lime;

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

{
    // 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']
}

---

可以使用构建工具将sas编译为css。您正在使用什么？Webpack无法编译它。我在编译时出错。否。请参阅此链接以了解更多细节@user32。您是否可以分享我在webpack.config.js文件中应该拥有的全部内容。如果可能的话，我会试试这个@Joey我们需要在index.html文件中包含webpack.common.js吗？不太清楚你的意思。如果这是捆绑的webpack输出，那么是的。Joey当我使用：styles:[require（'./header.component.scss'）.toString（）]时，请您共享整个配置文件，然后它开始查找home.component.scss.js文件。因此，未找到404。为什么它要查找scss.js文件？我试过了，但它给了我错误。请看更新的问题。