微信小程序
小程序基础库: 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
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]'
}
}
配置完成。
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的自定义主题)
Most helpful comment
配置完成。
1.移除mini.postcss.cssModules 的老配置。
2.新增css-loader配置如下
ps:目的是将src下所有less文件开启cssModule, getLocalIdent排除了两个我自己的全局样式文件app.global.less和customVariables.global.scss(TaroUi的自定义主题)