SASS variable interpolation with React CSS modules

Question

I'm working in a project where we are using React, we are writing our styles with SASS and then let webpack do the rest.

We just recently started using CSS Modules (babel-plugin-react-css-modules to be exact) and the transition has been smooth, except for one thing.

Before the CSS Modules, we were utilising the BEM naming convention. It would often happen that we would do something like this, inside a component's .scss file:

$block: '.box';

#{$block} {
    //css rules

    &#{$block}--modifier {
        //other rules
    }
}

In essence we were making use of SASS's variable interpolation capability, in order to write less in the case where the block level element's class name was big.

The problem is that as far as I can tell variable interpolation, for such a scenario, is no longer working with babel-plugin-react-css-modules.

I am getting an error like

ERROR in ./src/index.jsx
Module build failed: Error: E:/Mitch/Workspace/Projects/testbed/src/index.jsx: Could not resolve the styleName 'box'.

I understand that with scoped CSS rules, there is really no need for writing something like .box__list anymore, since you can simply write .list, since it's scoped to the component, but just for curiosity's sake, is it possible to have SASS's variable interpolation work with babel-plugin-react-css-modules ?

Agney · Accepted Answer · 2017-08-26 12:38:18Z

1

CSS Modules allows you to use locally scoped class names and animation names. This is its absolute functionality.

They have also provided a composes keyword because it helps maintain self sufficient component files within a single file without repetition. This works like SCSS @extends but differently. You can read about it here

However, if you would like to use variable interpolation badly, you could just add SCSS preprocessor to your webpack config. babel-plugin-react-css-modules has documented the same here

But, then it's just PostCSS, you can add any plugin to suit your needs. CSS Modules doesn't care.

answered Aug 26, 2017 at 12:38

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dimitris Karagiannis Over a year ago

I am using sass-loader and sass-node already in my build process, however variable interpolation doesn't work. Anyway, as it turns out, variable interpolation is not needed at all, and this question is definitely a 'can I do it' type instead of 'should I be doing it' :) Thanks for taking the time to reply.

Collectives™ on Stack Overflow

SASS variable interpolation with React CSS modules

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related