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

问题描述

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

I am using webpack to load my SCSS files, but I see the CSS being repeated many times over in my HEAD section in the HTML.

我使用 sass loader 和 postcss

有什么想法吗?

推荐答案

我怀疑您在整个应用程序中使用了不同的 SCSS 文件.您是否在这些 SCSS 文件中导入全局变量?具有常见样式的东西，例如字体和基本变量等?如果是，您需要将它们分开.

I suspect you use different SCSS files you import all over your app. Do you import globals in those SCSS files? Something with common styles like fonts and base variables etc? If yes, you need to split them up.

如果你在 webpack 中使用 SASS/SCSS，你真的必须确保你导入的所有东西都不会输出 CSS，因为它不会被去重.

If you use SASS/SCSS with webpack, you really have to make sure that everything you import does not output CSS, because it will not be deduplicated.

看这个例子:

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 import 被包含了两次.指向另一个 SASS 文件的所有 SASS 导入都不由 webpack 处理，因此它们不会被删除重复数据.我们在大型代码库中也遇到了这个问题，但设法修复了它.

The result of the above four files with webpack and sass-loader will be that the Google Fonts import is included twice. All SASS imports you do that point to another SASS file are not handled by webpack, so they are not deduplicated. We had this issue too in a large codebase but managed to fix it.

您想要做的是以下内容:

What you want to do instead is the following:

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 也不存在问题.

You can see in the example above that the contents of global.scss are only imported via JS, so they go through webpack and will be deduplicated. All imports done from inside a SASS context don't output any CSS, so there's no issue with duplicate CSS either.

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

In short: when using sass-loader with webpack, try to do as much importing in JavaScript. Only imports done in JS can be deduped by webpack. Imports done from inside SASS files should only import variables, mixins and other things that don't output any CSS.

这篇关于相同的 CSS 一遍又一遍地注入 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！