Тот же CSS вводится в HTML снова и снова

Question

Я использую webpack для загрузки своих файлов SCSS, но я вижу, что CSS повторяется много раз в разделе HEAD в HTML.

Я использую sass loader и postcss

Любые идеи?

Answer 1

Я подозреваю, что вы используете разные SCSS файлы импорта во всем приложении. Вы импортируете глобальные переменные в эти файлы SCSS? Что-то с общими стилями, такими как шрифты и базовые переменные и т. Д.? Если да, вам нужно разделить их.

Если вы используете SASS/SCSS с webpack, вам действительно нужно убедиться, что все, что вы импортируете, не выводит CSS, потому что оно не будет дедуплицироваться.

Смотрите этот пример:

index.js

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

header.scss

import 'base'; 

.header { color: hotpink; } 

button.scss

import 'base'; 

.button { font-size: 14px; } 

_base.scss

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

В результате этих четырех файлов с WebPack и Сасс-погрузчик будет что импорт Google Fonts включен дважды. Все 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.

Вкратце: при использовании sass-loader с веб-пакетом старайтесь делать как можно больше импорта в JavaScript. Только импорт, сделанный в JS, может быть депонирован webpack. Импорт из внутренних файлов SASS должен только импортировать переменные, миксины и другие вещи, которые не выводят никаких CSS.