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

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

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

我已经在根目录中创build了一个文件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; } 

所以基本上我不能给dynamicvariables赋值。 任何人有一些关于这个想法的份额。 TIA

Answer 1

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

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

对于你的webpackconfiguration，我认为你有很多装载机。 我相信你应该能够拥有

 'raw-loader!sass-loader' 

我目前的configuration是：

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

Answer 2

您正在使用StyleUrls而不是Styles

按styles: [ String(require('./header.component.scss')) ]更改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中，search“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'] }