zoukankan      html  css  js  c++  java
  • taro CSS Modules 的使用

    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]'
            }
          }
        }
      }
    }

    H5 端开启

    h5: {
      module: {
        postcss: {
          // css modules 功能开关与相关配置
          cssModules: {
            enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
            config: {
              namingPattern: 'module', // 转换模式,取值为 global/module,下文详细说明
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
          }
        }
      }
    }

    在开启之后,你就可以在 Taro 中使用 CSS Modules 功能了,值得注意的是,Taro 中使用 CSS Modules 有两种模式,分别为全局转换及部分自定义转换模式,通过 namingPattern 配置进行控制

    namingPattern 配置取值分别如下: - global,表示全局转换,所有样式文件都会经过 CSS Modules 转换处理,除了文件名中包含 .global. 的样式文件 - module,表示自定义转换,只有文件名中包含 .module. 的样式文件会经过 CSS Modules 转换处理

    推荐使用自定义转换模式,这样的话就不会影响到一些第三方库的样式了

    CSS Modules 使用方式如下

    组件样式

    .test {
      color: red;
      .txt {
        font-size: 36px;
      }
    }

    组件 JS 中使用样式

    import Taro, { Component } from '@tarojs/taro'
    import { View, Text } from '@tarojs/components'
    
    import styles from './Test.module.scss'
    
    export default class Test extends Component {
      constructor(props) {
        super(props)
        this.state = { }
      }
    
      render () {
        return (
          <View className={styles.test}>
            <Text className={styles.txt}>Hello world!</Text>
          </View>
        )
      }
    }

    .

  • 相关阅读:
    JDBC批处理
    SQL注入攻击及其解决方法
    JDBC配置文件的开发形式
    JDBCUtils工具类
    利用JDBC技术,模拟用户登录的过程。查询用户表,用户名和密码是否匹配,是否存在。
    JDBC进行数据库的--增--删--改--案例----纯代码
    JDBC遍历结果集---ResultSet
    软件测试(十三)
    软件测试(十二)
    软件测试(十一)
  • 原文地址:https://www.cnblogs.com/crazycode2/p/10151795.html
Copyright © 2011-2022 走看看