taro开启cssModule之后编译h5版页面出现报错
-
报错如下:
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'localIdentName'. These properties are valid: object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
我的配置如下:
这是我整个配置文件
const config = { projectName: 'taroApp', date: '2020-5-7', designWidth: 375, deviceRatio: { '375': 1 / 2, '640': 2.34 / 2, '750': 1, '828': 1.81 / 2 }, sourceRoot: 'src', outputRoot: 'dist', babel: { sourceMap: true, presets: [ ['env', { modules: false }] ], plugins: [ 'transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread', ['transform-runtime', { 'helpers': false, 'polyfill': false, 'regenerator': true, 'moduleName': 'babel-runtime' }] ] }, plugins: [], defineConstants: { }, mini: { postcss: { pxtransform: { enable: true, config: {} }, url: { enable: true, config: { limit: 10240 // 设定转换尺寸上限 } }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: 'module', // 转换模式,取值为 global/module generateScopedName: '[name]__[local]___[hash:base64:5]' } } } }, h5: { publicPath: '/', staticDirectory: 'static', postcss: { autoprefixer: { enable: true, config: { browsers: [ 'last 3 versions', 'Android >= 4.1', 'ios >= 8' ] } }, cssModules: { enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: 'module', // 转换模式,取值为 global/module generateScopedName: '[local]___[hash:base64:5]' } } }, devServer: { port: 8080 } } } module.exports = function (merge) { if (process.env.NODE_ENV === 'development') { return merge({}, config, require('./dev')) } return merge({}, config, require('./prod')) }
有遇到这相同问题的同学希望能指点一二
-
我升级至2.2.3后也发现这个问题,后发现在2.2.3中@taro/webpack-runner这个包引用的css-loader升级至3.0.0版本,这个版本中localIdenName这个属性的配置发生了变化从而引起了问题,你可以尝试回退taro版本或者将css-loader版本改为2.1.1。