Webpack多次导入相同的样式

我注意到，我的webpack配置在头文件<style>中多次导入相同样式，当我在@ssport文件中导入样式时。Webpack多次导入相同的样式

我想这是因为我的全局样式文件，它看起来像这样的：

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

我以后导入的样式在多个其他组件样式文件：

@import 'global';

有没有我错过的配置？
我想我可以通过导入在index.js文件中导入全局样式文件，但这些导入必须先到达，并且不知何故我无法通过webpack实现这一点。

试着将你的mixins /变量分隔成一个单独的'.scss'，你可以分别导入你的全局和你的组件。 – ctrlplusb

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

他们是不是单独暴露变量？检查节点模块dir – ctrlplusb

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

2016-09-24 10:45:32 eavidan

sass可以达到同样的效果吗？ –

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

好吧，现在，我认为，你是对的。也许这是我第一次使用导入不正确 –

我想这是因为你已经命名文件global.scss而不是_global.scss。下划线告诉译员，这是一个部分，而不是为它创建一个文件。

2016-09-25 12:30:40

回答