问题描述
预期行为
构建成功。
实际行为
将 mini-css-extract-plugin 与 postcss-loader 结合使用时,模块构建失败。如果我从加载程序列表中删除 postcss-loader,那么它会正确构建。 mini-css-extract-plugin 或 postcss-loader 有问题?
ERROR in ./src/views/app.vue?vue&type=style&index=0&lang=less& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/views/app.vue?vue&type=style&index=0&lang=less&)
Module build Failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build Failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: node.getIterator is not a function
at LazyResult.visitTick (E:\demo\node_modules\postcss\lib\lazy-result.js:522:33)
at LazyResult.runAsync (E:\demo\node_modules\postcss\lib\lazy-result.js:402:30)
at async Object.loader (E:\demo\node_modules\postcss-loader\dist\index.js:87:14)
at processResult (E:\demo\node_modules\webpack\lib\normalModule.js:700:19)
at E:\demo\node_modules\webpack\lib\normalModule.js:806:5
at E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (E:\demo\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (E:\demo\node_modules\postcss-loader\dist\index.js:96:7)
@ ./src/views/app.vue?vue&type=style&index=0&lang=less& 1:0-482 1:0-482
@ ./src/views/app.vue 4:0-64
@ ./src/main.js 7:0-32 28:13-20
代码
exports.cssLoaders = function (options) {
options = options || {};
const cssLoader = {
loader: 'css-loader',options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',options: {
sourceMap: options.sourceMap
}
}
function generateLoaders (loader,loaderOptions) {
const loaders = [];
if (options.extract) {
loaders.push(MiniCssExtractPlugin.loader)
} else {
loaders.push('vue-style-loader')
}
loaders.push(cssLoader)
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
if (loader) {
loaders.push({
loader: loader + '-loader',options: Object.assign({},loaderOptions,{
sourceMap: options.sourceMap
})
})
}
return loaders
}
return {
css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less')
}
}
解决方法
我找到了导致错误的 postcss 插件 postcss-px2rem-exclude
。