Question

我正在尝试从css包中提取一些媒体查询，但是很遗憾，插件无法正常工作。

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/src!./node_modules/jscrollpane/style/jquery.jscrollpane.css
    Module build failed: TypeError: Invalid PostCSS Plugin found at: plugins[0]

这是我的 postcss.config.js

const path = require('path');

module.exports = {
    plugins: [
        {
            'postcss-extract-media-query': {
                output: {
                    path: path.join(__dirname, 'dist'),
                    name: '[name]-[query].[ext]'
                },
                queries: {
                    'screen and (min-width: 1024px)': 'desktop'
                }
            }
        }
    ]
}

Postcss没有它就可以正常工作，至少我没有任何错误

webpack.config.js 的一部分，我怀疑这里是否存在任何问题，因为它可以正常工作

cssLoader = [ 'css-loader', 'postcss-loader'],

return {
    module: {
        rules: [ { test: /\.css$/, use:  cssLoader  },]
    }
}

我的 package.json

的一部分

    "postcss": "^7.0.14",
    "postcss-extract-media-query": "^1.2.0",
    "postcss-loader": "^3.0.0",
    "webpack": "^3.12.0",

您知道为什么它不起作用吗？

UPD：

如果按以下方式使用它，我没有任何错误：

module.exports = {
    plugins: [
            require('postcss-extract-media-query'),
    ] }

但是我还需要设置一些选项，所以它对我不起作用

postcss-extract-media-query插件无效

0 个答案: