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。


登录后回复