如何在 Angular 2 中将 SASS 用于组件样式？

Posted 2023-03-06

【中文标题】如何在 Angular 2 中将 SASS 用于组件样式？

【英文标题】：How to use SASS for components style in Angular 2?

【发布时间】：2016-11-13 19:34:20

【问题描述】：

在 Angular 2 中，当我们定义一个组件时，我们可以为装饰器指定一个 styleUrls 属性，该属性指向一组要应用于组件的样式表：

@Component(
    selector: 'the-app'
    templateUrl: 'templateFile.html',
    styleUrls: ['componentStyles.css', 'moreComponentStyles.css']
)
export class TheAppComponent 

现在，如果我想用 SASS 编写这些样式怎么办？

我知道我需要使用 Gulp 或 Grunt 将 SCSS 样式表转换为纯 CSS。但这让我对如何正确地将 Angular 指向正确的样式表感到困惑。

如何组织这个将 SASS 与 Gulp/Grunt 与 Angular 2 一起使用的工作流程？如何使用 SASS 编写 Angular 2 组件样式？

【问题讨论】：

如果你偶然使用了angular-cli，你需要做的就是重命名文件名并保留所有其他引用，剩下的由 angular-cli 处理

我找到了如何完成这项工作。请在下面阅读我的答案:)

【参考方案1】：

你可以像这样在组件中使用 .scss-

styles: [require('normalize.css'), require('./app.scss')],

看看这是否有帮助。

【参考方案2】：

在关注此wiki 之后，我得到了一些Error: Uncaught (in promise): Expected 'styles' to be an array of strings，我使用此answer 解决了这些问题。

最终解决方案在这里：

home.component.ts：

import  Component  from '@angular/core';

@Component(
  selector: 'home',
  template: require('./home.component.html'),
  styles: [ String(require('./home.component.scss')) ]
)

export class HomeComponent  

webpack.conf.js：（部分）

  
    test: /\.(css|scss)$/,
    loaders: [
      'style',
      'css',
      'sass',
      'postcss'
    ]
  ,

【讨论】：

能否分享一下 webpack.conf.js

当我使用 :styles: [ String(require('./home.component.scss')) ] 然后它开始寻找 home.component.scss.js 文件。因此给出 404 未找到。为什么要查找 scss.js 文件？

【参考方案3】：

我是这样用的：

import Component from "@angular/core";

// for webpack
require('./footer.scss');

@Component(
     selector: 'footer',
     templateUrl: 'app/footer/footer.html',
    styleUrls: ['app/footer/footer.scss'],
)
export class FooterComponent 

【参考方案4】：

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

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

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

然后在你的组件中：

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