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

Question

假设我有以下两个组件，直接需要相同的实用程序 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

官方文档说:

Deduplication

If you use some libraries with cool dependency trees, it may occur that some files are identical. Webpack can find these files and deduplicate them. This prevents the inclusion of duplicate code into your bundle and instead applies a copy of the function at runtime.

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

虽然我还没有尝试过。