带有 Webpack 的 CSS 模块

Question

大家好，我正在尝试在我的简单 webpack 项目中使用 CSS 模块。问题是编译后，webpack 没有将样式类附加到我的 HTML 元素。

我可以在console.log(styles) 中看到一个包含我的编码样式的数组。但是类没有添加到我的 div 中。

有人可以帮我解决这个问题吗？

**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>

Answer 1

你需要使用style-loader 将你的css注入到dom中。

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