Question

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

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

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

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

@import 'global';

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

Answer 1

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

Answer 2

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

Answer 3

用新的@import替换@use，并且所有内容仅应导入一次

Answer 4

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

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

看起来将@import 更改为@use 肯定会解决您的重复问题。