-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SCSS duplication: import-once doesn't work with JS imports of SCSS #707
Comments
@ColbyJohnIBM Thank you for reporting the issue! Before we do some deep dive, does #702 sound something related? |
@asudoh, no, this has more to do with the way that JS imports of SCSS work generally, rather than a specific component. However, |
It seems like there are likely two options here, namely make sure to only call external libraries once per bundle, or to leverage an additional tool that guarantees that modules are only included once. https://github.com/at-import/node-sass-import-once seems like a good option, will try and see how feasible it'd be to make an example and include in in the React project. Let me know if you have come across other potential solutions! |
Going to close this now due to inactivity, feel free to re-open if you feel like we should keep digging into this! |
carbon-design-system#761) * fix(MultiSelect): handle case of MultiSelect with initialSelectedItems, resolves carbon-design-system#707 * test(MultiSelect): add scenario of initialStelectedItems * fix(MultiSelect): handle case of MultiSelect with initialSelectedItems, resolves carbon-design-system#707
Detailed description
I've been struggling to prevent SCSS duplication within my application that uses carbon-components. After significant investigation, I found that the reason was related to JS importing SCSS files which seems to prevent the import-once mixin from being effective.
Our file system is partly to blame for the duplication issue, as we have a style sheet for each of our components, which gets imported by the JS for that component. In our application, the easiest way to avoid the majority of duplication problems has been to import specific SCSS files from carbon-components which only import variables and mixins into each style sheet. However, some of the style rules within
carbon-components
(particularly those that use the reset mixin) seem to still be duplicated.It would be helpful if there was an example of how to structure an application to best avoid this CSS duplication problem when using
carbon-components
.Steps to reproduce the issue
I've created a simple repo (based on
carbon-components-react
's version ofcreate-react-app
) that reproduces this behavior: https://github.com/ColbyJohnIBM/carbon-components-import-once-issueTo reproduce, clone the repo and run
yarn build
. You should see that the built CSS contains two copies of thecarbon-components
style rules.The text was updated successfully, but these errors were encountered: