Переключение Webpack между style-loader и extract-text-webpack-plugin

Question

Переключение Webpack между style-loader и extract-text-webpack-plugin

1

У меня есть разработка и создание webpack-конфигураций, где я переключаюсь между использованием style-loader и extract-text-webpack-plugin для extract-text-webpack-plugin CSS, соответственно. Это связано с тем, что моя конфигурация конфигурации использует горячую замену модуля и, следовательно, требует встроенных стилей, в то время как мой конфигурационный файл не работает.

Однако при переходе от производства к разработке я заметил, что извлеченный main.css оставшийся от моей сборки webpack, является переопределением встроенных стилей моего style-loader. Это означает, что горячая перезагрузка не работает на изменения CSS.

Во-первых, не должны ли мои встроенные стили переопределять мою внешнюю main.css стилей main.css, так почему это происходит? Во-вторых, если это ожидаемое поведение, каково общее соглашение об этом? Должен ли я использовать некоторый плагин для main.css чтобы удалить main.css в моей конфигурации разработки?

sir_thursday 21 сен. 2017, в 18:49

Источник

0

Существует ряд причин, по которым ваш main.css переопределяет ваши встроенные стили. Не могли бы вы опубликовать образец main.css для анализа?
Aaron Martin-Colby 02 окт. 2017, в 19:21
0

Я второй это. Нам нужен пример класса CSS в main.css, который переопределяет встроенный стиль. Вам также следует использовать процедуру для очистки ваших каталогов.
Joshua Dannemann 03 окт. 2017, в 16:47

Теги:

javascript

css

webpack

webpack-dev-server

hot-module-replacement

1 ответ

Ещё вопросы

Существует ряд причин, по которым ваш main.css переопределяет ваши встроенные стили. Не могли бы вы опубликовать образец main.css для анализа?
Я второй это. Нам нужен пример класса CSS в main.css, который переопределяет встроенный стиль. Вам также следует использовать процедуру для очистки ваших каталогов.

RamiReddy P · Answer 1 · 2017-10-04T04-20-00.000Z

Вы можете сделать это

const webpack = require('webpack');
const path = require('path');
const env = require('./env.json');

var conf = {

    resolve: {
        extensions: ['', '.ts', '.js'],
        root: __dirname,
        modulesDirectories: ['node_modules']
    },
    module: {
        rules: [
            //Some common Loaders Here
            {
                test: /\.js$/,
                loader: 'source-map-loader',
                exclude: [
                    'node_modules/rxjs'
                ]
            }

        ],
        loaders: [{
            test: /\.ts$/,
            loader: 'awesome-typescript-loader'
        }],
    },
    plugins: [
        //Some common plugins Here ,
    ],
    output: {
        path: 'src',
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].bundle.map',
        //chunkFilename: '[id].[chunkhash].chunk.js'
    }
};

if (env.dev) {
    conf.module.rules.push({
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
    });
    conf.plugins.push(new ExtractTextPlugin("styles.css"));

} else {

    conf.module.rules.push({
        test: /\.css$/,
        use: [{
                loader: "style-loader"
            },
            {
                loader: "css-loader"
            }
        ]
    });


}

module.exports = conf;