Nwb: Enabling css-modules for nwb-sass

Created on 29 Jan 2016 · 6Comments · Source: insin/nwb

Hey,

I wasn't able to find a way to enable css-modules for .scss files after looking over the various ways to configure plugins. Maybe I missed something?

I tried some variations of:

loaders: {
  scss: {
    query: {
      modules: true
    }
  }
}

docs support

Source

brumm

Most helpful comment

In my case it worked with 'vendor-sass-css':

nwb.config.js:

module.exports = {
  type: 'react-app',
  webpack: {
    loaders: {
      'vendor-sass-css': {
        modules: true,
        localIdentName: '[hash:base64:5]'
      }
    }
  }
}

jvitela on 17 Nov 2016

👍2

All 6 comments

The loader id for the css-loader used along with sass-loader would be sass-css - changing scss in your example to that should make it work.

This is a bit fiddly, so it should really be documented explicitly in each plugin's README rather than relying on people finding the right doc in the nwb repo.

[ ] Document style loading pipeline config in CSS preprocessor plugin READMEs

This uses sass as an example: https://github.com/insin/nwb/blob/master/docs/Plugins.md

insin on 29 Jan 2016

Ah, so close. Thank you!

brumm on 30 Jan 2016

In my case it worked with 'vendor-sass-css':

nwb.config.js:

module.exports = {
  type: 'react-app',
  webpack: {
    loaders: {
      'vendor-sass-css': {
        modules: true,
        localIdentName: '[hash:base64:5]'
      }
    }
  }
}

jvitela on 17 Nov 2016

👍2

Is this still up to date? I've tried a few different ids (sass, sass-css, sass-style, etc.) but can't seem to get it to work

clauderic on 14 Feb 2017

This project has since been upgraded to Webpack 2 so make sure you're using the new Webpack 2 configuration format: webpack.loaders has been renamed to webpack.rules. Also, make sure you have nwb-sass installed in your project.

module.exports = {
  webpack: {
    rules: {
      'sass-css': {
        modules: true,
        localIdentName:  '[hash:base64:5]'
      },
    }
  }
}