Use component SCSS #1606

lagerfeuer · 2021-04-30T19:47:50Z

lagerfeuer
Apr 30, 2021

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).

Answered by coderwurst

Dec 21, 2021

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)

View full answer

coderwurst · 2021-12-21T11:53:37Z

coderwurst
Dec 21, 2021

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)

2 replies

coderwurst Dec 21, 2021

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

lagerfeuer Dec 21, 2021
Author

I have not, thank you for sharing this!

Navigation Menu

Uh oh!

Use component SCSS #1606

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Use component SCSS #1606

Uh oh!

lagerfeuer Apr 30, 2021

Replies: 1 comment · 2 replies

Uh oh!

Uh oh!

coderwurst Dec 21, 2021

Uh oh!

coderwurst Dec 21, 2021

Uh oh!

lagerfeuer Dec 21, 2021 Author

lagerfeuer
Apr 30, 2021

Replies: 1 comment 2 replies

coderwurst
Dec 21, 2021

lagerfeuer Dec 21, 2021
Author