Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
zcSkr opened this issue Aug 7, 2020 · 4 comments
Assignees
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-2 Version - 2.x

Comments

@zcSkr
Copy link

zcSkr commented Aug 7, 2020

相关平台

微信小程序

小程序基础库: 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 
@taro-bot2 taro-bot2 bot added F-react Framework - React T-weapp Target - 编译到微信小程序 V-2 Version - 2.x labels Aug 7, 2020
@zcSkr zcSkr changed the title Taro2.2.11 版本配置了cssLoaderOption->modules:true之后导致Taro UI样式失效,请贴一下默认global模式的配置 Taro2.2.11+版本配置了cssLoaderOption->modules:true之后导致Taro UI样式失效,请贴一下默认global模式的配置 Aug 7, 2020
@luckyadam luckyadam self-assigned this Aug 9, 2020
@luckyadam
Copy link
Member

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

@zcSkr
Copy link
Author

zcSkr commented Aug 12, 2020

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

@zcSkr
Copy link
Author

zcSkr commented Aug 19, 2020

配置完成。
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的自定义主题

@zcSkr zcSkr closed this as completed Aug 19, 2020
@aaabinbin
Copy link

@zcSkr 老哥,有没有使用过这个属性,好像加不上去namedExport

cssLoaderOption: {  
      modules: {
        auto: /\.module\.less$/i,  
        mode: 'local',
        localIdentName: '[hash:base64:6]',
        namedExport: true,
      },
},

20211214165850

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-2 Version - 2.x
Projects
None yet
Development

No branches or pull requests

3 participants