create-react-library
create-react-library copied to clipboard
transitive-bullshit
Unable to use scss files.
Hello, I don't see anywhere in documentation how can scss files cand be used. Any ideas?
import styles from './yourstylesheet.scss' at the top of your package
And then for every className make sure to use styles.yourClass rather than entering the string "yourClass", I think that is just how Rollup is configured.
I'm currently writing a component library. I need consistent and predictable CSS Class names. This allows consumers of my component library to override CSS styles, or even set SASS variables and build the CSS within their own React Apps.
A "real world" example would be Bootstrap. More specifically, React Bootstrap. Without consistent CSS Class names, it wouldn't be of much use.
Anyone know how we might use SCSS/SASS (node-sass) without creating CSS modules?
UPDATE
I should read the FAQ more often. I hear they have answers to questions that are frequently asked.
The following link shows how you can "opt out" of CSS Modules.
https://github.com/transitive-bullshit/create-react-library/issues/56#issuecomment-630322078
In the event that the link breaks, the author states the following:
In
./package.json, add the following option to both the"start"and"build"scripts (microbundle-crl) and re-run the script:
--css-modules false
Once applied, the styles in ./dist/index.css should have predictable CSS Class names.
You can still use scss file as below:
import './yourstylesheet.scss'
Then in this scss file .
Add :global{ ... } to wrap your scss style code .
I am able to load .scss using node-sass and sass-loader as my devDependencies
