Taro: Taro2.2.11+版本配置了cssLoaderOption->modules:true之后导致Taro UI样式失效,请贴一下默认global模式的配置

Created on 7 Aug 2020  ·  3Comments  ·  Source: NervJS/taro


相关平台

微信小程序

小程序基础库: 2.12.0
使用框架: React

复现步骤

mini: {
cssLoaderOption: {
modules: true,
},
}

期望结果

开启css module,样式文件不用加.global/.module
且Taro UI样式正常

实际结果

css module是开启了,但是导致在app.js 中引入的
import taro-ui/dist/style/index.scss 失效了

环境信息

 Taro CLI 2.2.10 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.18.1 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 2.2.13 => 2.2.13 
      @tarojs/mini-runner: 2.2.13 => 2.2.13 
      @tarojs/plugin-babel: 2.2.13 => 2.2.13 
      @tarojs/plugin-csso: 2.2.13 => 2.2.13 
      @tarojs/plugin-less: 2.2.13 => 2.2.13 
      @tarojs/plugin-sass: 2.2.13 => 2.2.13 
      @tarojs/plugin-terser: 2.2.13 => 2.2.13 
      @tarojs/redux: 2.2.13 => 2.2.13 
      @tarojs/redux-h5: 2.2.13 => 2.2.13 
      @tarojs/router: 2.2.13 => 2.2.13 
      @tarojs/taro: 2.2.13 => 2.2.13 
      @tarojs/taro-alipay: 2.2.13 => 2.2.13 
      @tarojs/taro-h5: 2.2.13 => 2.2.13 
      @tarojs/taro-swan: 2.2.13 => 2.2.13 
      @tarojs/taro-tt: 2.2.13 => 2.2.13 
      @tarojs/taro-weapp: 2.2.13 => 2.2.13 
      @tarojs/webpack-runner: 2.2.13 => 2.2.13 
      eslint-config-taro: 2.2.13 => 2.2.13 
      eslint-plugin-taro: 2.2.13 => 2.2.13 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      stylelint-config-taro-rn: 2.2.13 => 2.2.13 
      stylelint-taro-rn: 2.2.13 => 2.2.13 
      taro-ui: ^2.3.4 => 2.3.4 

F-react T-weapp V-2

Most helpful comment

配置完成。
1.移除mini.postcss.cssModules 的老配置。
2.新增css-loader配置如下

cssLoaderOption: {

  modules: {
    auto: /[a-zA-Z]+\.less$/i,
    mode: 'local',
    localIdentName: '[name]_[local]_[hash:base64:5]',
    getLocalIdent: (context, localIdentName, localName, options) => {
      if (context.resourcePath.includes('customVariables.global.scss') || context.resourcePath.includes('app.global.less')) {
        return localName;
      }
    },
  }

}

ps:目的是将src下所有less文件开启cssModule, getLocalIdent排除了两个我自己的全局样式文件app.global.less和customVariables.global.scss(TaroUi的自定义主题

All 3 comments

cli 也升级到 2.2.13 咯
使用 mini.postcss.cssModules 配置试试吧

cli 也升级到 2.2.13 咯
使用 mini.postcss.cssModules 配置试试吧

我试验的时候cli和依赖都已经是2.2.13了
然后cssModules的配置 2.2.10以及之前 都是如下配置,是好用的,到了2.2.13这段配置有没有都不能让index.less 这种文件使用cssModule模式了

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

Taro2.2.13.zip

配置完成。
1.移除mini.postcss.cssModules 的老配置。
2.新增css-loader配置如下

cssLoaderOption: {

  modules: {
    auto: /[a-zA-Z]+\.less$/i,
    mode: 'local',
    localIdentName: '[name]_[local]_[hash:base64:5]',
    getLocalIdent: (context, localIdentName, localName, options) => {
      if (context.resourcePath.includes('customVariables.global.scss') || context.resourcePath.includes('app.global.less')) {
        return localName;
      }
    },
  }

}

ps:目的是将src下所有less文件开启cssModule, getLocalIdent排除了两个我自己的全局样式文件app.global.less和customVariables.global.scss(TaroUi的自定义主题

Was this page helpful?
0 / 5 - 0 ratings