角度アプリケーションでのSASS/SCSSの使用方法

Question

私はangass2アプリケーションでカラーテーマ機能を構築しようとしています。マイ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; 
} 

したがって、基本的に変数に動的な値を割り当てることはできません。誰もがこのplsの株式に関するいくつかのアイデアを持っている。 TIA

Answer 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' 
}, 

Answer 2

あなたは

styles: [ String(require('./header.component.scss')) ]によってStyleUrls代わり

Stylesの変更styleUrls: ['app/header/header.component.scss']を使用しているが、よりを参照してください。 https://stackoverflow.com/a/38349028/689429

「ローダー：」webpack.common.jsで npm install node-sass sass-loader raw-loader --save-dev

を検索、：

は、プロジェクトフォルダ内の必要な

Answer 3

コマンドラインは、既存のpackage.jsonがどこにある場合は、あなたのエラーを更新しての最後にこのオブジェクトを追加しますローダー配列（前のオブジェクトの末尾にカンマを追加することを忘れないでください）：

{ 
    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'] 
}