Webpack 多次导入相同的样式

Posted 2023-02-22

【中文标题】Webpack 多次导入相同的样式

【英文标题】：Webpack imports the same styles multiple times

【发布时间】：2017-02-02 04:20:49

【问题描述】：

我注意到，当我在 sass 文件中 @import 样式时，我的 webpack 配置多次将相同的样式导入到 head <style> 标签中。

我认为这是因为我的全局样式文件如下所示：

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import '~material-design-lite/src/material-design-lite.scss';

我稍后在多个其他组件样式文件中导入样式：

@import 'global';

是否有一些我遗漏的配置？ 我以为我可以通过 import 将 index.js 文件中的全局样式文件导入，但是这些导入必须首先出现，并且不知何故我无法通过 webpack 实现。

【问题讨论】：

尝试将您的 mixins/变量分离到一个单独的 .scss 中，您可以将其分别导入全局和组件中。

我使用 mdl（材料设计语言）从他们的节点模块包中提供的变量。不幸的是，我无法拆分该文件

他们不单独公开变量吗？检查节点模块目录

是的，我才意识到，它们只提供变量/mixin，不会编译成css，所以如果它们被多次导入也没关系。我将不得不配置 webpack 以删除巨大的许可证注释...

Same CSS is injected into html over and over again的可能重复

【参考方案1】：

Sass 中的@import 从 2022 年开始贬值，但新的 @use 旨在解决这个问题。

如果你有一个依赖全局变量（颜色、断点等）的大文件系统，它似乎有缺点，虽然我还没有让它在我的工作系统上运行，但如果你有一个较小的文件系统，它是绝对值得研究@use 和@forward。

看起来将@import 更改为@use 可以解决重复问题。

【参考方案2】：

将@import 替换为新的@use，所有内容都应该只导入一次

https://sass-lang.com/documentation/at-rules/import

【参考方案3】：

我认为这是因为您将文件命名为 global.scss 而不是 _global.scss。下划线告诉编译器这是一个部分的而不是为它创建一个文件。

【讨论】：

这就是我讨厌网络的原因。

【参考方案4】：

这不是 webpack 的问题，更多的是你对 CSS 的使用。 由于 CSS 资源是静态编译的，因此每个导入 global 的样式表中都有一个副本。 您可以使用 Less 和 @import (reference) statement，或者如果您更喜欢 CSS，则单独加载它，不要每次都导入它。

【讨论】：

sass 可以实现同样的目标吗？

我不知道。我对 sass 所做的只是导入带有变量定义的 scss 文件，因为这是在应用程序中导入任何内容的唯一真正原因。除此之外，只需在您的主应用程序或 scss 文件中导入每个（外部）样式表。

好的，现在看，你是对的。也许是我首先错误地使用了导入