CSS-модули с Webpack - PullRequest
Новая
       43

CSS-модули с Webpack

0 голосов
/ 23 октября 2019

Привет всем, я пытаюсь использовать модули CSS в моем простом проекте веб-пакета. Проблема в том, что после компиляции webpack не присоединяет класс стилей к моему HTML-элементу.

Я могу видеть массив с моими закодированными стилями в console.log(styles). Но класс не добавляется в мои div.

Может ли кто-нибудь помочь мне с этим, пожалуйста?

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>

1 Ответ

1 голос
/ 23 октября 2019

Вам нужно использовать style-loader, чтобы ввести свой CSS в DOM. 

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