Search code examples
csswebpackcss-modules

CSS modules with Webpack

Hi all I'm trying to use CSS modules in my simple webpack project. The problem is that after compiling, webpack doesn't attach style class to my HTML element.

I can see an array with my encoded styles in console.log(styles). But class is not added to my divs.

Can some one help me with this please?

enter image description here

**package.json**

  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "path": "^0.12.7",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  }


**webpack.config.js**

const path = require('path');

module.exports = {
    // Path to your entry point. From this file Webpack will begin his work
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'public/assets'),
        filename: '[name].bundle.js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
            {
                test: /\.css$/i,
                loader: 'css-loader',
                options: {
                    modules: true,
                },
            },
        ]

    }
};


**src/js/app.js**

import styles from "./css.module.css";
let el = document.getElementById('main');
el.innerHTML=  '<div class="'+styles.red+'">RED OR NOT RED! This is the problem!</div>';

**src/js/css.module.css**

.red{ color: red; }

**public/index.html**

<div id="main"></div>
<script src="assets/main.bundle.js"></script>
Solution

  • You need to use style-loader to inject your css into dom.

    {
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ]
}