search

css-modules / webpack-demo

Working demo of CSS Modules, using Webpack's css-loader in module mode
https://css-modules.github.io/webpack-demo/
1.49k stars 180 forks source link

Docs request: Using CSS Modules with extract-text-webpack-plugin #25

Open kevinSuttle opened 8 years ago

kevinSuttle commented 8 years ago

loader: ExtractTextPlugin.extract("style-loader", "css-loader") vs loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

joshblack commented 8 years ago

It would be the same pattern, except you would also pass the parameters into the css-loader part.

For example:

loader: ExtractTextPlugin.extract(
  'style',
  'css?modules&importLoaders=1&localIdentName=[hash:base64:5]&minimize',
)
kurt-hardy commented 8 years ago

I know this was awhile ago but I'm having problems with getting CSS module working with the ExtractTextPlugin. I have tried lots of things to no avail. Does anyone have a working example?

I have tried the following loaders ExtractTextPlugin.extract("style", "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]" ), "sass"

And ExtractTextPlugin.extract("style"), "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]", "sass"

Any help would be great :-)

Thanks Kurtis

janusch commented 8 years ago

@kurt-hardy the first syntax look right, not the second one. What is it that is not working?

here one from here: https://github.com/react-toolbox/react-toolbox-example/blob/master/webpack.config.js

ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')

kurt-hardy commented 8 years ago

@janusch thanks for your response.

I had ExtractTextPlugin(...), "sass". SASS being outside of the parenthesis for the plugin. Once I removed that it worked. I didn't realise that the second parameter was the loaders I wanted to run.

Thanks. Kurtis

janusch commented 8 years ago

Sassy sass loader! Glad you figured it out. This loader chains can be so confusing. I am trying to get a config for webpack 2 working, no luck :( PostCSS + cssnext wont transpile css variables, and I don't understand why.