taro打包后样式和开发时样式不一致

1,393 阅读1分钟

起因:

使用taro开发微信小程序时没有开启cssModules,直接引入less进行开发

结果:

样式在打包后出现了合并,部分样式错乱,开发环境正常

产生问题的原因:

taro在生产环境编译时会默认开启csso工具来压缩css代码

image-20210823172318165.png csso在压缩代码的过程中,会合并作用域相同的代码(设置的属性不同依然会触发合并),合并规则如下

github.com/css-modules…

image-20210823172454096.png

解决方法1:

在config/index文件内,引入csso取消代码压缩

const csso = require('csso');
 csso: {
    enable: false,
    config: {
      // 配置项同 https://github.com/css/csso#minifysource-options
    }
 },

image-20210823172938062.png

解决方法2:

使用cssmodules进行开发

taro-docs.jd.com/taro/docs/c…

image-20210823173048657.png