一、开启模块化配置
Taro 中内置了 CSS Modules 的支持,但默认是关闭的。如果需要开启使用,请先在编译配置中添加如下配置:
weapp: {
module: {
postcss: {
// css modules 功能开关与相关配置
cssModules: {
enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
config: {
namingPattern: 'module', // 转换模式,取值为 global/module,下文详细说明
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
}
二、用法
(一)用法一
- Style 标签使用
module
属性,View 节点使用class
属性,对应的值为$style.类名
。<template> <p :class="$style.red">This should be red</p> </template> <style module lang=