Почему стиль модуля перекрывается при одинаковом имени файла - PullRequest
Новая
       20

Почему стиль модуля перекрывается при одинаковом имени файла

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

Я пытаюсь стилизовать каждый компонент отдельно с помощью плагина css-loader Webpack. Но когда файлы имеют одинаковое имя (например, «index.scss») и имеют одинаковое свойство (например, «.container»), они будут комбинировать оба стиля, но в этом случае мне просто нужны. Как я могу решить это

Это моя конфигурация Webpack: 

rules: [
    {
        test: /\.(sa|sc|c)ss$/,
        use: [
            { 
                loader: 'style-loader',
                options: {
                    insertAt: 'top',
                    sourceMap: true
                }
            },
            {
                // Handle import/ require css
                // It help to css for each component
                // https://github.com/webpack-contrib/css-loader#scope
                loader: 'css-loader', 
                options: {
                    sourceMap: true ,
                    localIdentName: '[path][name]__[local]--[hash:base64:5]',
                    camelCase: true,

                } 
            },
            { 
                loader: 'postcss-loader',
                options: {
                    sourceMap: true,
                    // minimize: true,
                    plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        // Help to generate specific css for each component
                        // require('postcss-modules'),
                        autoprefixer({
                            browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                        }),
                    ],  
                }
            },
            { loader: 'sass-loader', options: { sourceMap: true } },
        ],
    },
]

Пример: src/screen1/index.tsx

const styles = require('./index.scss')

const Dashboard = ({ children, url }: IDashboardPropsIn) => {
    return (
        <div className={styles.body}>
            {children}
        </div>
    )
}

А у меня 2 файла: src/screen2/index.scss и src/screen1/index.scss Каким-то образом в классе, имя которого body--[hash:64] имеет оба стиля из 2 файлов

src/screen1/index.scss

:local {
  .body {
    grid-area: body;
    background-color: $white;
 }
}

и src/screen2/index.scss

:local {
  .body {
    display: flex;
 }
}

Стиль body--[hash:64] будет 

grid-area: body;
background-color: $white;
display: flex;

Но в этом случае я импортирую только один файл src/screen1/index.scss, например 

grid-area: body;
background-color: $white;

Как я могу решить это?

Ответы [ 2 ]

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

Обновление css-loader пакет до версии 0.28.11

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

Вы не указали опцию modules в своей конфигурации 

        {
            // Handle import/ require css
            // It help to css for each component
            // https://github.com/webpack-contrib/css-loader#scope
            loader: 'css-loader', 
            options: {
                sourceMap: true ,
                localIdentName: '[path][name]__[local]--[hash:base64:5]',
                camelCase: true,
                modules: true, // or 'local' | 'global' | false

            } 
        },

Подробнее в документах

...