css-loader 破坏 postcss-cssnext 变量答案

【问题标题】：css-loader breaking postcss-cssnext variablescss-loader 破坏 postcss-cssnext 变量
【发布时间】：2018-04-25 23:58:25
【问题描述】：

我有以下配置，其中有一个 EventInfoCard。当它处于预加载状态时，它会渲染一个不同的组件，该组件从父级继承了很多 CSS。我正在使用 postcss-cssnext 变量，而这个 composes 函数似乎与 css-loader 不兼容。

EventInfoCard.css

@import '../constants.css';

.root {

}

.thumbnail {
    display: block;
    width: 100%;
    height: 0px;
    padding-bottom: 56%;
    position: relative;
    overflow: hidden;
    border-radius: var(--xxxs)px;
}

.notification {
    border-radius: var(--xxxs)px;
    font-size: 12px;
    display: inline-block;
    height: var(--s)px;
    padding: 0 var(--xxs)px;
    line-height: var(--s)px;
    text-transform: uppercase;
    font-weight: var(--weight-medium);
    margin-right: var(--xxs)px;
}

.description {
    letter-spacing: -0.1px;
    margin-top: 7px;
}

EventInfoCardPreloading.css

@import '../constants.css';

.root {
    background: blue;
}

.thumbnail {
    composes: thumbnail from './InfoCard.css';
    background-color: var(--tones-lightest);
}

.description {
    composes: description from './InfoCard.css';
}

虽然现在它似乎引入了 EventInfoCard CSS 并且没有转换变量，但最终会出现如下所示的无效 CSS。那么我做错了什么？我认为composes只会获取类名而不带入文件。

postcss 配置：

const path = require('path')

module.exports = {
    plugins: {
        'postcss-partial-import': {},
        'postcss-mixins': {
            mixinsDir: path.join(__dirname, 'statics', 'mycujoo-theme', 'mixins')
        },
        'postcss-nested': {},
        'postcss-cssnext': {
            browsers: ['last 2 versions', '> 5%'],
        }
    }
}

webpack 加载器配置：

    test: /\.css$/,
    use: extractCSS.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } },
            { loader: 'postcss-loader' }
        ]
    }),

【问题讨论】：

标签： javascript css postcss css-loader postcss-import

【解决方案1】：

由于您的配置使我们使用CSS Modules 和postcss-loader，它还应该声明一个importLoaders 选项来创建postcss-loader and css-loader with CSS modules enabled work together。

test: /\.css$/,
use: extractCSS.extract({
    fallback: 'style-loader',
    use: [
        { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]__[local]___[hash:base64:5]' } },
        { loader: 'postcss-loader' }
    ]
}),

【讨论】：