同じCSSがHTMLに何度も繰り返し注入される

Question

webpackを使用してSCSSファイルをロードしていますが、HTMLのHEADセクションで何度もCSSが繰り返し表示されています。

私はsass loaderとpostcss

任意のアイデアを使うのか？

Answer 1

私はあなたがすべてのあなたのアプリ上でインポート異なるSCSSファイルを使用して疑います。それらのSCSSファイルでグローバルをインポートしますか？フォントやベース変数などの共通のスタイルを持つもの？はいの場合は、それらを分割する必要があります。

webpackでSASS/SCSSを使用する場合、重複排除されないため、インポートするすべてのものがCSSを出力しないようにする必要があります。

この例を参照してください：

index.js

import './header.scss'; 
import './button.scss'; 

header.scss

import 'base'; 

.header { color: hotpink; } 

button.scss

を210

import 'base'; 

.button { font-size: 14px; } 

_base.scss

@import url(http://fonts.googleapis.com/css?family=Roboto); 

のWebPACKとSASS-ローダーと上記の4つのファイルの結果Googleのフォントのインポートが二度含まれていることになります。他のSASSファイルを指しているすべてのSASSインポートは、ではなく、webpackによって処理されたであるため、重複排除されません。私たちはこの問題も大きなコードベースで持っていましたが、それを修正することができました。

あなたが代わりにやってみたいことは以下の通りです：

index.js

import './global.scss'; 
import './header.scss'; 
import './button.scss'; 

header.scss

import 'varsandmixins'; 

.header { color: hotpink; } 

button.scss

import 'varsandmixins'; 

.button { font-size: 14px; } 

global.scss

// This file should include everything you need globally that outputs CSS. 
@import url(http://fonts.googleapis.com/css?family=Roboto); 
@font-face { 
    // your font definition here 
} 

_varsandmixins.scss

// This file on it's own should not output any CSS! Only variables and mixins! 
$baseColor: #000; 
$fontFamily: 'Roboto', sans-serif; 
@mixin something($var) { 
    rule: $var; 
} 

あなたは global.scssの内容が唯一のJSを経由して輸入されていることを上記の例で見ることができるので、彼らが行く

重複排除されます。SASS文脈の中から行われたすべてのインポートはCSSを出力しないので、重複CSSの問題もありません。

要するに、webpackでsass-loaderを使用する場合、JavaScriptで多くのインポートを行うようにしてください。 JSで行われたインポートのみがwebpackによって除外されます。内部SASSファイルからのインポートは、CSSを出力しない変数、ミックスインなどをインポートするだけです。