web-dev-qa-db-ja.com

Angular 2）のコンポーネントスタイルにSASSを使用する方法

Angular 2では、コンポーネントを定義するときに、コンポーネントに適用するスタイルシートのセットを指すstyleUrlsプロパティをデコレータに指定できます。

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

SASSでこれらのスタイルを記述したい場合はどうなりますか？

SCSSスタイルシートをプレーンCSSにトランスパイルするには、GulpまたはGruntを使用する必要があることはわかっています。しかし、これにより、Angularが正しいスタイルシートを正しく指すようにする方法について混乱します。

Angular 2と一緒にGulp/GruntでSASSを使用するこのワークフローをどのように整理できますか？SASSを使用してAngular 2コンポーネントスタイルを作成する方法は？

cssangularsassgruntjsgulp
8
user1620696

この 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'
    ]
  },
3
MaximeBernard

あなたはこのようにコンポーネントで.scssを使うことができます-

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

これが役立つかどうかを確認します。

0
Sanket

既存のpackage.jsonがあるプロジェクトフォルダー内のコマンドライン：npm install node-sass sass-loader raw-loader --save-dev

Webpack.common.jsで「rules：」を検索し、このオブジェクトをrules配列の最後に追加します（前のオブジェクトの最後にコンマを追加することを忘れないでください）：

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

次に、コンポーネントで：

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

私はそれをこのように使用しています：

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 {}
0
Angel M.