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; 

我想kn的捆绑系统只能输入some-other-css.scss一次。

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

此外，

如何处理内部的CSS导入？

如果我有cssFile1和cssFile2通过import语句在JavaScript中输入：

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

我还没有尝试过，但。