It adds unique identifiers to all class names and ids, which helps in falling into style conflicts. Also it supports sass.
- install
styled-jsx-plugin-sass
(Done) - install
node-sass
(Done) - add configuration to
next.config.js
to support styles in regular scss files as (Done, remove .txt extension)import styles from "./style.scss"; ... (in jsx component) <style jsx>{styles}</style> ...
- setup custom
.babelrc
to support file imports from internal files, instead from _app.js only. (Done, remove .txt extension)
The challenge is to support styles in regular scss files in our CRA app