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",
なぜうまくいかないのか分かりますか?
更新:
次のように使用する場合、エラーはありません。
module.exports = {
plugins: [
require('postcss-extract-media-query'),
] }
しかし、いくつかのオプションも設定する必要があるため、うまくいきません