私はAngular CLI with Webpackを利用して、新しい角型2プロジェクトを作成しています。 mixins、変数、および特定のタグのインポートを格納するグローバルなSCSSファイルを作成する方法を理解することはできません。Webpackを使用した角度付きCLI - プロジェクトにグローバルSCSSを含めるにはどうすればいいですか？
<body>をSCSSファイルのいずれかでターゲットに設定するときはいつでも、要素を検査するときにそれらのスタイルが見つからないことがあります。私はapp.cssファイルを作成して、index.htmlファイルの先頭にそれを含めようとしましたが、私はmixinや変数などをインポートできないという問題に遭遇しました。
<body>をターゲットにすることができるだけでなく、すべてのサブコンポーネントがグローバルスタイルを継承する何らかの種類のファイルをapp.scssで作成できましたか？
グローバルスタイルの適用については、Webpackのangular-cliの最新リリースでエラーが発生しているようです。このGithub issueを参照してください。
更新日：2016年8月31日 アップグレード最新バージョン（1.0.0-beta.11-webpack.8）にangular-cliグローバルスタイルで問題を修正しているようです。グローバルスタイルを設定するには、hereの指示に従ってください。デフォルトでは、グローバルSCSSスタイルシートを使用したい場合は、あなたのアプリケーションを作成するとき、あなたは--style=scssフラグを指定することができ、グローバルCSSファイルを使用することです：
ng new scss-project --style=scss
angular-cliは、グローバルスタイルシートstyles.scssを生成し、それが含まれますファイルangular-cli.jsonこれは、で宣言されたスタイルがグローバルであり、アプリケーション全体に適用される（特定のコンポーネントにスコープされない）ことをangular-cliに示します。これは、index.htmlにリンクステートメントを使用してスタイルシートを含めるのと同じです。既存のプロジェクトの場合
、あなたが使用してデフォルトのスタイルを設定することができますあなたのangular-cli.jsonで
ng set defaults.styleExt scss
を、余分なグローバルスタイルシートやスクリプトを以下に示したスタイルとスクリプトのアレイに追加することができます。
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.scss"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"dev": "environments/environment.dev.ts"
}
}
]
ボディータグにスタイルが適用されないのはなぜですか？
あなたはコードを投稿していないので推測しますが、<body>タグにSCSSスタイルが適用されていない理由は、Component Stylesを使用しているためです。また、app.component.scss呼ばComponent Styleを生成
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
title = 'app works!';
}
：--style=scssフラグをangular-cliプロジェクトを生成するとき、それは、app.compontent.tsと呼ばれるルートレベルのコンポーネントを作成します。これは重要なポイントです。これは、コンポーネントスタイルがコンポーネントに適用されるためです。コンポーネントのスタイルは、このようなコンポーネントに設定されている：
styleUrls: ['app.component.scss']
あなたはapp.component.scssに含める任意のスタイルが唯一app.component.tsとそれに対応するテンプレートapp.component.html（とその子供）に適用されます。
<body>
<app-root>Loading...</app-root>
</body>
私はそれがあなたの質問に答える願っています：それはangular-cliによって生成されたindex.htmlファイルのルートレベルのコンポーネントのスコープの外にあるので、スタイルが<body>タグに適用されない理由があります。
についてちょっとブレイク、ありがとうは非常に説明、これは実際に多くの意味があります。私は、グローバルなapp.cssを作成し、index.htmlファイルにインクルードする必要がありましたが、それは理想的ではありませんが、今のところうまくいくでしょう。再度、説明のためにありがとう：D –
問題ありませんが、angular-cliのバグは1.0.0-beta.11-webpack.8で修正されているようです。私の更新された回答を参照してください。特に、グローバルSCSSスタイルを含むこのリンクの指示に従ってください：https://github.com/angular/angular-cli#global-styles。 index.htmlファイルでグローバルapp.cssを使用することは避けられます。 –
更新いただきありがとうございます！私は1.0.0-beta.11-webpack.8にアップデートしましたが、現在、ng serveを実行しようとすると、（angular-cli.jsonを更新しても）エラーが発生します： 'プロパティを読み取れません '長さ 'が定義されていません TypeError：Object.getWebpackCommonConfig（/Applications/MAMP/htdocs/learnloop/node_modules/angular-cli/addon/ng2/models/webpack-build-common.ts）の未定義の プロパティ' length ' 23:25） ' 私はすべてが正しく行われたと信じているので、これをどうすればいいのか分かりません。 –
あなたが変数のコンポーネントファイルからのファイルをインポートする必要があります。
@import "XX/XX/XX/_name.scss";
XXは、ゲームへ
たぶん少し遅れ変数を使用してファイルへの相対ルートです。私たちには私たちのカスタムwebpack設定があり、sass-resources-loaderを利用してグローバルmixin /変数をコンポーネントに公開しています。
{ test: /\.scss$/, loader: ["raw-loader", "sass-loader", { loader: 'sass-resources-loader', options: { resources: ['./styles/global/_common.scss', './styles/global/_mixins.scss', './styles/global/_grid.scss', 'node_modules/bootstrap/scss/_mixins.scss', 'node_modules/bootstrap/scss/_variables.scss'] }, } ] }
の可能性のある重複した[Angular2にサスを統合 - WebPACKの]（http://stackoverflow.com/questions/39147082/integrate-sass-in-angular2-webpack） – Brocco