css модули не работают с моим проектом webpack 4 - PullRequest
0 голосов
/ 07 марта 2019

Я использую mini-css-extract-plugin вместо ExtractTextWebpackPlugin, потому что у меня есть webpack 4.

Мой webpack.config.js:

const webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/build',
    publicPath: '/',
    filename: 'app.js'
  },
  devServer: {
    contentBase: './src/assets/',
    publicPath: '/build/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              camelCase: true,
                minimize: true,
                namedExport: true,
                modules: true,
                importLoaders: 2,
                localIdentName: '[hash:base64:5]',
            }
          }
        ]
      },
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ]
  },
   plugins: [
     new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "css/style.css",
    }), 
     new HtmlWebpackPlugin()
     ]
};

У меня есть компонент с именем Header, который использует файл CSS.Я объявил в свойстве className имя класса css, класс которого находится в файле css, но когда я запускаю приложение, на html-странице нет класса css.Зачем?Компонент заголовка:

import React, { Component } from 'react';
import styles from './header.css'

class Header extends Component {
  render() {
    return (
      <header className={styles.root}>
        <h1 className={styles.logo}>Hola</h1>
      </header>
    );
  }
}

export default Header;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...