Create-react-app: scss files not being compiled on build

[TITAN9389]

after copying my app from CRA v1 to v2 everything seems working fine using .scssfiles but after building my app the .scss files are not being compiled at all. tried different ways, @import all .scss in one file and import it insideindex.js, tried .module.scss and normal import './[name].scss non of them working on build. (node-sass) installed as mentioned in the doc.

[bugzpodder]

Please fill out the issue template.

[Timer]

If you can provide a reproducible (small) demo that'd be fantastic.

[TITAN9389]

Please fill out the issue template.

didn't fill thought maybe i'm doing something wrong and not a bug (as the template says if not bug write plain text).

[TITAN9389]

If you can provide a reproducible (small) demo that'd be fantastic.

if you mean small working part from the app sorry i can't since it's a private repo. if you can ask some more specific stuff i can try to provide as much as i can.

here is my folder structure.

@import 'styles/_drawer.scss'; @import 'styles/_notes.scss'; @import 'styles/_sidebar.scss'; @import 'styles/_user.scss';

this works fine and showing the css files on dev , but after build i can't see any classes related to my files in the output css.

[Timer]

So in production the styles aren't applied when visiting the page?

[TITAN9389]

So in production the styles aren't applied when visiting the page?

yes they are not applied at all , just i can see the normal css styles not scss ones.

everything installed on latest versions (node-sass, react-scripts, react)

[TITAN9389]

@Timer i've manually compiled my scss to css and on production it still ignoring my own css files.

[dkhurshudian]

@TITAN9389 The reason can be in webpack's tree shaking optimisation.
On development mode it simply comments unused imports so you still can see your styles, in in production mode unused modules getting removed from bundle at all.
try to add this configuration to your package.json

....
"sideEffects": [
    "*.css"
  ]
...

For more detailed doc's see https://webpack.js.org/guides/tree-shaking/

[TITAN9389]

@TITAN9389 The reason can be in webpack's tree shaking optimisation.
On development mode it simply comments unused imports so you still can see your styles, in in production mode unused modules getting removed from bundle at all.
try to add this configuration to your package.json

....
"sideEffects": [
    "*.css"
  ]
...

For more detailed doc's see https://webpack.js.org/guides/tree-shaking/

@davo11122 not working , the weird thing that it's just ignoring a specific css file ,other css files are working.

[yasircse]

same issue here...i've imported all partial (_scss) files into index.scss so that i can share variables across partial (_scss) files. But in some partial (_scss) files variables are working fine. However, in other _scss files they dont work so i manually import the _variables.scss file. This is weird. If im already importing all my partial (_scss) files into index.scss and then importing the index.scss to a parent component then it should automatically make available all the variables.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.