帶有Webpack的Angular CLI - 如何在項目中包含全局SCSS？

我正在創建一個全新的Angular 2項目，利用了Angular CLI with Webpack。我似乎無法弄清楚如何創建一個全局SCSS文件，該文件包含mixin，變量和特定標籤的導入。帶有Webpack的Angular CLI - 如何在項目中包含全局SCSS？

任何時候我嘗試在任何SCSS文件中設置<body>，當我檢查元素時，無法找到這些樣式。我嘗試創建一個app.css文件，並將其包含在index.html文件的頭部，但後來遇到了無法導入我的mixins或變量或任何此類問題的問題。

是否有人能夠創建某種類型的app.scss文件，以便所有子組件繼承全局樣式，並且能夠定位<body>？

來源

2016-08-25 Stevie Star

的可能的複製[在Angular2整合薩斯 - 的WebPack（http://stackoverflow.com/questions/39147082/integrate-sass-in-angular2-webpack） – Brocco

當涉及到應用全局樣式時，Webpack的最新版本angular-cli似乎出現錯誤。請參閱此Github issue。

更新：2016年8月31日 升級到最新版本（1.0.0-beta.11-webpack.8）似乎已經解決了這一問題與angular-cli全局樣式。要設置全局樣式，請按照說明here。

ng new scss-project --style=scss

angular-cli將產生一個全球性的樣式表styles.scss，並將其納入：默認是使用全局CSS文件，如果你想使用一個全球性的SCSS樣式表，您可以創建應用程序時指定--style=scss標誌angular-cli.json文件。這指示angular-cli在styles.scss中聲明的樣式應該是全局的，並且應用於整個應用程序（而不限於特定組件）。這相當於在您的index.html中通過鏈接語句包含樣式表。

現有項目，您可以使用設置默認的樣式：

ng set defaults.styleExt scss

在你angular-cli.json，額外的全局樣式表或腳本可以被添加到如下所示的樣式和腳本數組：

"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" 
     } 
    } 
    ]

爲什麼樣式不適用於您的身體標記？

我在這裏猜測是因爲您還沒有發佈任何代碼，但是您的SCSS樣式未應用於<body>標記的原因是因爲您正在使用Component Styles。當生成angular-cli項目與--style=scss標誌，它創建稱爲app.compontent.ts根水平分量：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
}

它也產生一個Component Style稱爲app.component.scss。這是一個重要的觀點，因爲組件樣式被限制在它們的組件中。A組分風格在組件設置是這樣的：

styleUrls: ['app.component.scss']

你app.component.scss包括任何樣式將只適用於app.component.ts及其相應的模板app.component.html（以及它的孩子）。樣式不應用於<body>標籤的原因是因爲它位於根級別組件中所產生的index.html文件範圍之外的angular-cli：

<body> 
    <app-root>Loading...</app-root> 
    </body>

我希望這能回答你的問題。

來源

2016-08-29 10:38:40

嘿布雷克，三江源非常多的這個解釋，這實際上是很有道理的。我最終不得不創建一個全局app.css並將其包含在index.html文件中，這並不理想，但它現在可以工作。再次感謝您的解釋：D –

沒問題，angular-cli中的bug似乎在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服務時，出現錯誤（即使更新了angular-cli.json後）： 'Can not read property'長度'未定義 TypeError：無法讀取Object.getWebpackCommonConfig上未定義的的屬性「長度」（/Applications/MAMP/htdocs/learnloop/node_modules/angular-cli/addon/ng2/models/webpack-build-common.ts： 23:25）' 我不太確定該怎麼做，因爲我相信我已經正確地做了所有的事情 –

其中變量是從組件文件，則必須導入文件：

@import "XX/XX/XX/_name.scss";

XX對您的文件的相對路徑與變量

來源

2017-02-07 17:25:35 Deepname

也許有點晚了比賽。對於我們來說，我們擁有自定義的webpack配置並利用sass-resources-loader將全局混合/變量公開給組件。

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

來源

2017-08-17 03:30:09

帶有Webpack的Angular CLI - 如何在項目中包含全局SCSS？

回答

相關問題