相同的CSS一遍又一遍地注入HTML

Question

我正在使用webpack来加载我的SCSS文件,但我在HTML的HEAD部分看到CSS重复了很多次.

我用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和sass-loader的上述四个文件的结果将是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导入,因此它们将通过webpack进行重复数据删除.从SASS上下文内部完成的所有导入都不输出任何CSS,因此重复CSS也没有问题.

简而言之:当使用sass-loader和webpack时,尝试在JavaScript中进行尽可能多的导入.只有在JS中完成的导入才能被webpack重复删除.从SASS文件内部进行的导入应该只导入变量,mixins和其他不输出任何CSS的东西.