Я использую 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;