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

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?