Can webpack bundle css/scss/less without duplicating required files?

Question

Let's say I have the following 2 components, requiring the same utility css file directly.

Component one:

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

Component two:

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

Then I am including them in my app:

Main App:

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

...

export default App;

I would like the bundle system to know to only import some-other-css.scss only once.

Is the style-loader + css-loader doing this already out of the box?

Furthermore,

How are the internal css imports handled?

If I have cssFile1 and cssFile2 imported in javascript via import statements:

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

And both cssFile1 and cssFile2 internally import cssFile3, will the content of cssFile3 appear duplicated in both the file1.css and file2.css? Or will the sass-loader work this out and include cssFile3 only once?

Answer 1

The official documentation says:

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

I haven't tried it yet though.