Postcss与css模块一起扩展

时间:2017-02-21 13:30:36

标签: webpack postcss css-modules

我有以下webpack配置:

test: /.css$/,
use: extractAppStyles.extract({
    fallback: 'style-loader',
    use: [{
        loader: 'css-loader',
        query: {
            modules: true,
            importLoaders: 1,
            sourceMaps: false
        }
    }, {
        loader: 'postcss-loader'
    }]
})

postcss.config.js

module.exports = {
    plugins: [
        require('precss'),
        require("postcss-extend")
    ]
};

我想在本地css模块中使用postcss-extend插件,这样我就可以在本地模块中扩展一些全局定义的选择器,如下所示:

.test {
   @extend :global(.some-class);
}

其中.test是本地的,.some-class是全局的。使用当前设置,只能扩展本地定义的选择器,并且全局变量似乎未定义:

  

':global(.some-class)',尚未定义,因此不能   扩展

加载器的顺序似乎是问题,我认为模块在postcss-extend插件处理时无法解析。我尝试在postcss-modules之前使用postcss-extend插件,但这没有按预期工作。

有没有人想出如何结合使用这两者,以便可以在本地扩展全局定义的选择器?

0 个答案:

没有答案