CSS 模块组合不工作

Question

我正在尝试使用 postcss + cssnext 设置 css 模块。一切似乎都运行良好，只是 composes 关键字根本不起作用。编译包时规则消失。

这是我的 webpack 配置文件:

'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')
        }
    }
}

我在这个开发环境中使用 style-loader，所以我可以使用热重载。正在导入 css 文件，如下所示:import './app.css'应用程序.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 工作的东西？

Answer 1

看起来不错:webpack 的 css_loader 的实现是在导出样式时添加这两个类(参见 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 得到两个类。