Webpack смешивает весь CSS из разных компонентов React - PullRequest
Новая
       56

Webpack смешивает весь CSS из разных компонентов React

0 голосов
/ 17 января 2019

Ниже моя конфигурация Webpack: 

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


module.exports = env => ({
    entry: './main.jsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: './'
    },
    mode: 'production',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
            test: [/\.js$|.jsx$/],
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['babel-preset-es2015', 'babel-preset-stage-2', 'babel-preset-react'],
            },
        },
        {
            test: /\.s?css$/,
            loader: 'style-loader!css-loader!sass-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        },
        {
            test: /\.(woff(2)?|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'icons/',
            },
        },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: './src/template.html'
      })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        watchContentBase: true,
        historyApiFallback: true,
        disableHostCheck: true,
    },
});

Когда я запускаю webpack и генерирую пакет, он извлекает CSS из всего приложения и помещает его в раздел head. Я использую SCSS, и каждый компонент имеет свой собственный файл SCSS. Ниже приведено дерево папок:

Folder structure

Вот так выглядит мое приложение React в браузере:

multiple style tags

Я знаю, что делаю глупости, но не могу понять, что. Как это исправить? Любая помощь приветствуется. Я использую Webpack 4.

1 Ответ

0 голосов
/ 17 января 2019

Вот что происходит, когда вы используете style-loader. Это добавляет CSS к голове.

Вы должны использовать mini-css-extract-plugin для генерации внешнего файла CSS.

...