如何在 Angular 应用程序中使用 SASS/SCSS

Posted 2023-03-06

【中文标题】如何在 Angular 应用程序中使用 SASS/SCSS

【英文标题】：How to use SASS/SCSS in angular application

【发布时间】：2017-03-17 00:54:23

【问题描述】：

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

【问题讨论】：

sass 可以使用构建工具编译成 css。你在用什么？

Webpack 无法编译它。编译时出现错误。 github.com/sass/node-sass/releases/tag/v3.10.1

没有。请参阅此链接以获取更多信息angular.io/docs/ts/latest/guide/webpack.html

@user32 你能分享一下我应该在 webpack.config.js 文件中的全部内容吗？ TIA

How to use SASS for components style in Angular 2?的可能重复

【参考方案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'
,

【讨论】：

好的，我会试试这个。 @Joey 我们需要在 index.html 文件中包含 webpack.common.js 吗？

不太清楚你的意思。如果那是捆绑 webpack 输出，那么是。

Joey 能否分享整个配置文件

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

【参考方案2】：

您使用的是StyleUrls 而不是Styles

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

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

如有必要，更新您的错误

【讨论】：

我试过了，但它给了我错误。请查看更新的问题。

【参考方案3】：

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

在 webpack.common.js 中，搜索“loaders:”并将这个对象添加到 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 

【参考方案4】：

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

form-automobile.component.ts

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

form-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']