2017-04-25 15 views
1

私はここで非常に単純なものが欠けているに違いないと思います。angular-cliとscssがインラインになっています

新しい角度のインストール、scssで新しいサイトを作成します。グローバルstyle.scssでscssを入力し、コンポーネントscssでいくつかを入力します。

これらのCSSが提供またはビルドされている場合は、インライン化されています。彼らは私が期待したり必要としているものが外部に含まれていません。

また、コンポーネントレベルのSCSSは、グローバルstyle.scss(これはおそらく、私が何かを期待している)

しかし、どのように私は配達のために生成された外部CSSファイルにSCSSを使用しないで変数を参照することはできませんか?

ありがとうございました! ポール

+0

angle-cliが内部的にwebpackを使用するため、 'css.loader、style-loader'や' Extract-text-webpack-plugin'のようなローダーを使用してください。 – Jai

答えて

1

はアンギュラcli.jsonに"styleExt": "css"を見つけ、"styleExt": "scss" と交換して、 "スタイル" で "styles.scss" を追加します:[] .angular-cli.json`

にあなたがしたい場合はstyleUrls: ['app.component.scss']

のように、グローバル変数には1つのscsssを使用し、他のすべてのscssファイルにインポートしてください。これを行う

0

試してみてください。

"server:dev": "ng serve -e dev --port 9000 --progress --watch --open --ec=true", 

はトリックを行う必要があります '--ec = true' を追加。 それ以外の場合は、あなたのangle-cliアプリを取り出して、ローダーを追加してwebpackファイルを手動で設定することができます。 https://github.com/angular/angular-cli/wiki/eject

+0

私はそれを与えるつもりです。しかし、アプリが流通のためにバンドルされている場合、スタイルは別々のファイルに表示されるように見えるので、これは開発中のローカル配信の結果であると仮定しています。 ecは何を意味しますか? ありがとう! – paulinventome

+0

はい、prodやAOTビルドを行うと、スタイルが抽出されます。 devで--ec = trueまたは--extract-cssを実行した場合と同じことですが、それはあなたのスタイルをsourceMapsで別々のファイルに抽出することです。 PS。私たちはdevでCSSを抽出するはずではありませんが、ビルドの遅さは遅くなりますが(今はこれが利用可能な解決策です) https://github.com/angular/angular-cli/issues/4199 –

+0

- "devで--ec = trueまたは--extract-cssを実行した場合と同じことですが、それは自分のスタイルをsourceMapsで別々のファイルに抽出することです。" - 必ずしもそうではありません。 --extract-cssオプションは、グローバルCSSスタイルをコンポーネントレベルのスタイルではなくスタイルシートに抽出するだけであることに注意してください。 '.angular-cli.json'の' styles'配列にリストされているものはすべてグローバルスタイルです。 – Meggg

関連する問題