Question

假设我有以下2个组件，需要直接使用相同的实用程序css文件。

第一部分：

import component1Css from '/path/to/component1.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component1;

第二部分：

import component2Css from './path/to/component2.scss'
import someOtherUtilityCss from './path/to/some-other-css.scss'
...
export default Component2;

然后我将它们包含在我的应用中：

主要应用程序：

import someLayoutCss from './path/to/some-layout.css';
import Component1 from './path/to/component1'
import Component2 from './path/to/component2'

...

export default App;

我希望捆绑系统只知道导入some-other-css.scss一次。

style-loader + css-loader是否已经开箱即用？

此外，

如何处理内部css导入？

如果我通过import语句在javascript中导入了cssFile1和cssFile2：

import cssFile1 from 'path/to/file1.scss'
import cssFile2 from 'path/to/file2.scss'

cssFile1和cssFile2都在内部导入cssFile3，cssFile3的内容是否会在file1.css和file2.css中重复出现？或者sass-loader会解决这个问题，只包含一次cssFile3吗？

Answer 1

官方文件说：

<强>重复数据删除

如果您使用一些具有很酷依赖树的库，则可能会发生   有些文件是相同的。 Webpack可以找到这些文件和   重复删除它们。这可以防止包含重复的代码   您的捆绑包，而是在运行时应用该函数的副本。

https://webpack.github.io/docs/optimization.html#deduplication

我还没试过。

Answer 2

我认为sass-loader会删除重复。
如果css不在项目中，它将重复。
并且您可以使用webpack config resolveLoader删除重复项。

webpack可以捆绑css / scss / less而不复制所需的文件吗？

2 个答案: