包括與Angular 4和webpack的全球sass

我有一個項目建立在帶有HMR的webpack的Angular 4上。不知道這是否重要，但我正在使用角模板使用ASP Core 2。包括與Angular 4和webpack的全球sass

我想要做的是有一個跨所有組件應用的全局/主scss文件。我想讓這個scss文件與webpack一起編譯，所以它與node_modules文件夾中的其他樣式一起提供。

我試圖實現這個沒有運氣。我的主要SCSS文件名爲styles.global.scss，我試着用下面的規則，包括它在我webpack.config.js文件

{ 
    test: /\.global\.scss$/, 
    exclude: /node_modules/, 
    use: ['style-loader', 'css-loader', 'sass-loader'] 
}

當我運行應用程序並運行的WebPack命令我沒有得到任何錯誤，但是，我做的沒有看到我的風格被應用。我的node_modules文件夾中的所有資源正在被應用，所以至少可以工作。我想保留我的角度組件的視圖封裝。我寧願不必將主/全局scss文件導入每個組件scss文件，也不必將其包含在component.ts文件的每個stylesUrl字段中。

如果您需要查看任何其他代碼，請讓我知道。提前致謝！

編輯：希望在問題中包括這一點，以防萬一任何人發現自己處於類似的情況。對於.scss文件，我有另一個規則與上述規則直接衝突。

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

來源

2017-09-13 David Lee

這聽起來像你需要指示Webpack來處理你的文件。你可以做到這一點與在boot.browser.ts頂部的進口（假設你使用的標準設置）：

import './path/to/styles.global.scss';

更新：根據評價和相應的聊天進一步的討論，我們發現，這兩個.scss規則彼此衝突。在此基礎上，更新在原來的問題所示的規則修復該問題：

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

這確保了*.global.scss處理的文件只有一次。

來源

2017-09-14 07:15:09

當我在'boot.browser.ts'文件中包含導入時，現在出現此錯誤。 '...加載樣式後無效的CSS：預期1選擇器或at-rule，是「var content = requi」' –

我也想提一提我有'.scss'規則'{test：/ \。 scss $ /，排除：/ node_modules /，使用：['raw-loader'，'sass-loader']}，'爲我的scss文件的component.scss。他們是否相互衝突？ –

包括與Angular 4和webpack的全球sass

回答

相關問題