问题描述
下面列出的所有插件都是最新版本。 少加载器:7.2.1 css 加载器:5.0.1 文件加载器:6.2.0 postcss-loader: 4.1.0 提取加载器:5.1.0 自动前缀:10.2.1
我的 postcss 配置:
module.exports = {
plugins: [require('autoprefixer')],};
我的 webpack (5) 配置中有以下规则:
test: /\.less$/,/* include: [
settings.PATHS.CSS_SOURCE,...settings.PATHS.CSS_FEATURES_SOURCE,],*/
use: [
{
loader: 'file-loader',options: cssOptions,},{
loader: 'extract-loader',{
loader: 'css-loader',options: {
importLoaders: 2,sourceMap: process.env.npm_lifecycle_event.indexOf('watch') > -1,url: false,{
loader: 'postcss-loader',options: {
postcssOptions: {
config: path.resolve(__dirname,'../postcss.config.js'),{
loader: 'less-loader',options: {
lessOptions: {
paths: [path.resolve(__dirname,'node_modules')],
我正在使用 importLoaders: 2 是因为我在 css-loader 的文档中看到,如果以前的加载器也对 @import 做了一些事情,这将是必需的? 现在我收到以下错误:
UnhandledPromiseRejectionWarning: Error: The module created for a LoaderDependency must have an original source
at compilation.handleModuleCreation.err (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\dependencies\LoaderPlugin.js:79:16)
at buildModule.err (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\Compilation.js:1556:8)
at hooks.result.callAsync.hookError (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\util\AsyncQueue.js:281:5)
at Hook.eval [as callAsync] (eval at create (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\tapable\lib\HookCodeFactory.js:33:10),<anonymous>:6:1)
at AsyncQueue._handleResult (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\util\AsyncQueue.js:254:21)
at _processor (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\util\AsyncQueue.js:237:11)
at _modulesCache.store.err (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\Compilation.js:1263:15)
at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\HookWebpackError.js:69:3
at Hook.eval [as callAsync] (eval at create (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\tapable\lib\HookCodeFactory.js:33:10),<anonymous>:15:1)
at Cache.store (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\Cache.js:107:20)
当我删除 importLoaders 属性时,出现以下错误:
TypeError: Cannot read property 'sources' of undefined
at cssWithMappingToString (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\css-loader\dist\runtime\cssWithMappingToString.js:25:33)
at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\css-loader\dist\runtime\api.js:14:21
at Array.map (<anonymous>)
at Array.toString (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\css-loader\dist\runtime\api.js:13:17)
at extractExports (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\extract-loader\lib\extractLoader.js:182:269)
at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\extract-loader\lib\extractLoader.js:171:45
at Generator.next (<anonymous>)
at step (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\babel-runtime\helpers\asyncToGenerator.js:28:13
我做错了什么? 这在我将 css-loader 升级到 v5.0.1 后开始发生
解决方法
显然问题在于提取加载器与 css-loader v5 不兼容。 我将 css-loader 降级到 v4,这修复了它。