Consider this scenario where I have two components that need 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;
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 want the bundling system to import some-other-css.scss only once. Is it handled by the style-loader + css-loader combination by default?
Moreover,
How are internal css imports managed?
If I import cssFile1 and cssFile2 in JavaScript like this:
import cssFile1 from 'path/to/file1.scss'
import cssFile2 from 'path/to/file2.scss'
And both cssFile1 and cssFile2 contain imports of cssFile3, will cssFile3 be duplicated in both cssFile1 and cssFile2? Or does the sass-loader handle this issue and include cssFile3 only once?