How to set up css-modules?

Question

Official documentation way too complicated and not working for me. Does anyone know any good article how to set up css-modules with webpack?

react-css-modules didn't help either

Update

Here is my modules config. It was edited while trying to reach my goal, so it differs from original.

module: {
    rules: [
        { test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
        {
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        }, {
            test: /\.png$/,
            loader: 'file-loader?name=[name]--[hash].[ext]',
        }
    ],
    loaders: [{
        test: /\.css/,
        loader: 'style-loader!css-loader&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    }, {
      test: /\.html$/,
      loader: 'file-loader',
    }]
},

score 1 · Accepted Answer · answered Apr 18 '17 at 19:08

1

It's fairly simple

You need style-loader, css-loader and set module mode.

{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}

Like that. Where [name]__[local]___[hash:base64:5] indicates structure of your css classes that webpack will generate for you.

I recommend follow this guide, is really that simple. https://github.com/css-modules/webpack-demo

answered Apr 18 '17 at 19:08

Pavel Suraba

54
4

that's what I did and still have my css classes without prefixes – Vitalii Korsakov Apr 18 '17 at 19:31
can u share your webpack config? – Pavel Suraba Apr 18 '17 at 19:54

score 0 · Answer 2 · answered Apr 20 '17 at 18:18

loaders: [{
    test: /\.css$/,
    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
  }],

after css-loader you need add ? then modules and so on.

In the component you need to import style:

import style from './App.css';

style - it's just object with properties which match to selectors.

And usage in component looks so:

const App = props => (   
<header className={style.header}>
   <Link to="/" className={style.link}>Awesome blog</Link>
</header>);

App.css looks so:

.header {
    font-size: 35px;
    text-align: center;
    line-height: 1.3;
}

How to set up css-modules?

2 Answers2