从Taro v1.3.10 升级到Taro v2.2.8 之后,taro 自带的部分组件样式还有taro-ui全局引入样式失效

[fuersite]

相关平台

H5

复现仓库

https://ivin_usinno@bitbucket.org/BestShare/bestshareminiprogram.git
浏览器版本: chrome 83.0.4103.116
使用框架: React

复现步骤

1. 按官网步骤单独给一个项目升级：https://taro-docs.jd.com/taro/docs/2.2.8/migrate-to-2
2. config/index.js按官网要求做了部分修改

const config = {
  projectName: 'BestShareMiniProgram',
  date: '2019-11-2',
  designWidth: 750,
  deviceRatio: {
    '375': 1 / 2,
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  // babel、csso、uglify 等配置从 plugins 配置中移出来
  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: [
    '@tarojs/plugin-less',
    '@tarojs/plugin-sass'
  ],
  // 可以删掉很多小配置
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    cssLoaderOption: {},
    esnextModules: ['taro-ui'],
    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: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  alias: {
    '@/src': path.resolve(__dirname, '..', 'src'),
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/resources': path.resolve(__dirname, '..', 'src/resources'),
  },
  uglify: {
    enable: true,
    config: {
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development' || process.env.BUILD_ENV === 'development') {
    return merge({}, config, require('./dev'))
  } else if (process.env.NODE_ENV === 'development' || process.env.BUILD_ENV === 'local') {
    return merge({}, config, require('./local'))
  }
  return merge({}, config, require('./prod'))
};
3. npm run dev:h5 

期望结果

样式正常

实际结果

taro-ui 样式全部失效，taro 自带组件部分失效例如 Image

环境信息

  Taro CLI 1.3.10 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.18.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/async-await: 2.2.8 => 2.2.8 
      @tarojs/cli: 2.2.8 => 2.2.8 
      @tarojs/components: 2.2.8 => 2.2.8 
      @tarojs/plugin-babel: 2.2.8 => 2.2.8 
      @tarojs/plugin-csso: 2.2.8 => 2.2.8 
      @tarojs/plugin-less: 2.2.8 => 2.2.8 
      @tarojs/plugin-sass: 2.2.8 => 2.2.8 
      @tarojs/plugin-uglifyjs: 1.3.10 => 1.3.10 
      @tarojs/redux: 2.2.8 => 2.2.8 
      @tarojs/redux-h5: 2.2.8 => 2.2.8 
      @tarojs/router: 2.2.8 => 2.2.8 
      @tarojs/taro: 2.2.8 => 2.2.8 
      @tarojs/taro-h5: 2.2.8 => 2.2.8 
      @tarojs/taro-weapp: 2.2.8 => 2.2.8 
      @tarojs/webpack-runner: 2.2.8 => 2.2.8 
      eslint-config-taro: 2.2.8 => 2.2.8 
      eslint-plugin-taro: 2.2.8 => 2.2.8 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      stylelint-config-taro-rn: 2.2.8 => 

[luckyadam]

示例仓库没有权限

[mya12321]

  cssModules: {
    enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
    config: {
      namingPattern: 'module', // 转换模式，取值为 global/module
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }

开启css-modules的原因, 可以考虑降级到2.2.7, 2.2.7没问题, 新版本css-modules一直没修好. #6947

[fuersite]

@mya12321 thx 降到2.2.7 问题解决了