Webpack 多次导入相同的样式

Question

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

我认为这是因为我的全局样式文件是这样的：

@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 实现这一点。

Answer 1

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