相同的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的东西。