如何在角度应用中使用SASS/SCSS [英] How to use SASS/SCSS in angular application

问题描述

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

I am trying to build a color theme functionality in angular2 application using sass. My header.component.scss file is:

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

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

I have created a file webpack.common.js in root directory and added the following in it:

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

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

My header is being displayed in default black color. However if i change the scss file to following then its displayed in red color.

h1{
    color: #f11;
}

所以基本上我不能为变量赋动态值.任何对此有想法的人都可以分享. TIA

So basically I am not able to assign dynamic value to variables. Anyone having some idea about this pls share. TIA

推荐答案

项目文件夹中位于您现有package.json为以下位置的命令行:npm install node-sass sass-loader raw-loader --save-dev

Command line inside project folder where your existing package.json is: npm install node-sass sass-loader raw-loader --save-dev

在webpack.common.js中，搜索"loaders:"，然后将此对象添加到loaders数组的末尾(不要忘记在前一个对象的末尾添加逗号):

In webpack.common.js, search for "loaders:" and add this object to the end of the loaders array (don't forget to add a comma to the end of the previous object):

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

然后在您的组件中:

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

如果您想要全局CSS支持，则在顶层组件(可能是app.component.ts)上删除封装并包括SCSS:

If you want global CSS support then on the top level component (likely app.component.ts) remove encapsulation and include the SCSS:

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

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

这篇关于如何在角度应用中使用SASS/SCSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！