CSS-модули не работают

Я пытаюсь настроить модули css с помощью postcss + cssnext. Кажется, все работает нормально, за исключением того, что ключевое слово composes просто не работает. Правило исчезает при компиляции пакета.

Вот мой файл конфигурации веб-пакета:

'use strict'

const path = require('path')
const webpack = require('webpack')
const HtmlPlugin = require('html-webpack-plugin')

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        path.join(__dirname, 'src', 'index')
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]-[hash].js',
        publicPath: ''
    },
    plugins: [
        // new DashboardPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new HtmlPlugin({
            title: 'Github App',
            template: path.join(__dirname, 'src', 'html', 'template-dev.html')
        })
    ],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            include: /src/,
            use: 'babel-loader'
        }, {
            test: /\.css$/,
            exclude: /node_modules/,
            include: /src/,
            use: ['style-loader', {
                loader: 'css-loader',
                options: {
                    modules: true,
                    importLoaders: 1,
                    localIdentName: '[local]--[hash:base64:5]'
                }
            }, {
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss'
                }
            }]
        }]
    },
    resolve: {
        alias: {
            Src: path.join(__dirname, 'src'),
            Components: path.join(__dirname, 'src', 'components')
        }
    }
}

Я использую загрузчик стилей для этой среды разработки, поэтому я могу использовать горячую перезагрузку. Файл css импортируется следующим образом: import './app.css' app.css:

:global{
    .app {
        float: left;
        padding: 10px;
        width: 100%;
    }
}

.className {
    color: green;
    background: red;
}

.otherClassName{
    composes: className;
    color: yellow;
}

это приводит к:

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

Мой postcss.config.js файл:

module.exports = {
    plugins: {
        'postcss-import': {},
        'postcss-cssnext': {
            browsers: ['last 2 versions', '> 5%']
        },
        'postcss-nested': {}
    }
}

Я что-то упустил, чтобы заставить composes работать?


webpack reactjs css css-modules postcss
person Pietro Coelho    schedule 17.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, это нормально: реализация css_loader webpack заключается в добавлении обоих классов при экспорте стилей (см. ">https://github.com/webpack-contrib/css-loader#composing)

Это также имеет больше смысла, поскольку в конечном итоге будет отображаться меньше кода CSS. Попробуйте импортировать стили и применить их к узлу HTML, и вы увидите, что он должен получить оба класса.

В вашем примере это сделало бы что-то вроде:

exports.locals = {
  className: 'className-2yqlI',
  otherClassName: 'className-2yqlI otherClassName-1qAvb'
}

Итак, когда вы делаете:

import styles from '../app.css'

// ...

<div className={styles.otherClassName} />

div получает оба класса.

person smallbutton    schedule 17.01.2018
comment
О, теперь я понимаю. Я надеялся, что это будет работать как расширение SASS, но похоже, что компоновка имеет смысл только при фактическом использовании класса. Спасибо - person Pietro Coelho; 17.01.2018