Sass with CSS Modules & Webpack Sass with CSS Modules & Webpack reactjs reactjs

Sass with CSS Modules & Webpack


Soon after posting, I figured out the solution. The problem, which I thought was quite confusing, was in my Webpack config. Originally my loader looked like:

loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

which enabled to me to 1) require my Sass and 2) wrap my styles in :local.

However, the css loader was missing the modules option so that it looked like:

loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

Now I can import my styles and I don't have to wrap them in :local (although I presume I still can if I want to).

What I found most interesting about all this is that without the modules option, one can still use CSS Modules-esque features, although somewhat limiting.

EDIT:

Something I noticed, a future warning to whomever looks at this answer, is if you're using the eslint-plugin-import to lint the imports in your javascript code, it will throw an error upon importing styles like:

import styles from './MyStyles.scss';

because of the way CSS Modules exports the resulting styles object. That does mean you'll be required to do require('./MyStyles.scss') to bypass any warnings or errors.