Webpack не может решить проблему с переопределением CSS и объединить элементы ‹style› в ‹head›

Допустим, в моем приложении есть две страницы JS A и B, и каждая из них импортирует разные таблицы стилей (import '../style/<A or B.css>').
Обе таблицы стилей имеют одинаковые имена классов, но разные свойства.

Я бегу yarn run dev ==> dev: webpack-dev-server --inline --hot ==> webpack -p

Вот как выглядит мой html <head>
https://imgur.com/a/1JVb5
Сначала загружается таблица стилей страницы A, затем загружается стиль css страницы B.

Когда я перехожу на страницу B, css правильный
Когда я перехожу на страницу A, CSS перепутан, и некоторые стили классов переопределяются страницей B.css.

Моя структура проекта похожа на

public/
 bundle.js
 index.html
src/
 components/
 pages/
 style/
 App.js
 index.js
 package.json
 webpack.config.js

мой webpack.config.js

const path = require('path');

var config = {
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'src'),
        publicPath: path.resolve(__dirname, 'public')
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
                { loader: 'babel-loader',
                options: { presets: ['react','env'] } }
            ]
        },
        {
            test: /\.css$/,
            use: [
                { loader: "style-loader?singleton", 
                  options: 
                  { singleton: true } 
                },
                { loader: "css-loader" }
            ]
        }
        ]
    }
};
module.exports = config;

Я хочу, чтобы Webpack объединил несколько элементов и устранил проблему переопределения css
В Webpack я пробовал style-loader?singleton и { singleton: true }, но это не сработало.

РЕДАКТИРОВАТЬ 1: просмотр экстракта-текста-webpack-plugin

ИЗМЕНИТЬ 2:

import movieStyle from '../style/MovieDetail.css' 
... 
return (
<div id="CellDetail_right" className={ movieStyle['cell-detail-right'] }>...</div>
)

Хорошо, я добавил options: { modules: true }, и это не сработало. Мои имена классов написаны через дефис, и после компиляции браузер отображает компоненты БЕЗ какого-либо стиля или классов. Div в браузере выглядит как <div id="CellDetail_right">...<div>


webpack css webpack-style-loader
person Ridhwaan Shakeel    schedule 15.03.2018    source источник
comment
вы можете решить эту проблему, установив для параметра css-loader modules значение true   -  person Carloluis    schedule 15.03.2018
comment
@Carloluis хорошо, я сделал это, теперь браузер отображает html без каких-либо стилей или классов   -  person Ridhwaan Shakeel    schedule 16.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Одним из решений является включение css с локальной областью действия, чтобы избежать кровотечения/переопределения стилей. Обновите параметры css-loader, включив в них modules: true

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader", 
            options: { singleton: true }
        },
        {
            loader: "css-loader",
            options: {
                modules: true,
                camelCase: 'dashes',
                localIdentName: '[path][name]__[local]'
            }
        }
    ]
}

Затем, используя в своих компонентах как:

import styles from '../style/MovieDetail.css';

function MyComponent() {
    return (
        <div className={styles.container}>
            <div className={styles.cellDetailRight}>Some Content</div>
        </div>
    );
}

Это гарантирует, что, несмотря на то, что в других файлах css определено больше .container правил, это конкретное правило становится чем-то вроде ._-path-to-component__container.

Использование camelCase: 'dashes' в параметрах преобразует ваши правила через дефис.

тире в именах классов будут верблюжьими

Вы также можете ознакомиться с моим проектом webpack-demo, который включает конфигурации для обработки вашего сценария. Проверьте конфигурации webpack.

Подробнее об опциях загрузчика css

введите здесь описание изображения

person Carloluis    schedule 15.03.2018
comment
Я так и сделал, теперь браузер отображает html без атрибута className. посмотри мой комментарий - person Ridhwaan Shakeel; 16.03.2018
comment
спасибо, я получил то, что хотел. полное решение здесь github.com/ridhwaans/homehost/blob/master /клиент/ - person Ridhwaan Shakeel; 18.03.2018
comment
Пожалуйста! Я проверил конфигурацию вашего стиля веб-пакета и обнаружил два правила для .css файлов (строки 40 и 59). Был ли полезен мой проект webpack-demo? Подумайте также о том, чтобы проголосовать за ответ, чтобы показать, что он был полезен. - person Carloluis; 19.03.2018