Use component SCSS

[lagerfeuer]

I usually set up my React codebases to have one SCSS per component. I like to style them this way. For example:

- components/
  - Header/
    - index.jsx
    - Header.scss

I am using the react-static-plugin-sass and I am importing the SCSS file in index.jsx as import './Header.scss, just like I'm used to. But this fails to get picked up and the component is unstyled. If I switch to plain CSS, it works. I tried adding every component directory to includePaths when configuring the SASS plugin, but no luck. Does anybody know how to get this working?

I'm moving a React project over to react-static. I know I could convert everything to CSS and call it a day, but I'd like to get this working (if at all possible).

[coderwurst]

Hi @lagerfeuer - did you ever find a solution to this problem? I'm in exactly the same situation as you, only that my ./Header.scss is called now ./Header.module.scss - but the styling isn't picked up.

static.config.js

['react-static-plugin-sass',
      {
        cssLoaderOptions: {
          modules: true,
          localIdentName: '[name]__[local]--[hash:base64:5]',
          importLoaders: 2
        }
 }],

Edit 22.12.21: Updated to include correct config from #1460 (comment) (savedyouaclick)

[coderwurst]

I stumbled around the issues backlog and seem to have found the answer: #1460 (comment)

[lagerfeuer]

I have not, thank you for sharing this!