css - webpack 可以在不复制所需文件的情况下捆绑 css/scss/less 吗？

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 删除重复项。