taro支付宝/微信小程序中是否可以配置babel-plugin-react-css-modules?

[Sanford284]

问题描述

目前css modules的需要通过className={styles.xxx}这种写法来支持，能否支持styleName=‘xxx’的写法？后续是否会改进呢？

### 期望行为

使用styleName='xxx'代替className={styles.xxx}，并且可以正常运行

### 系统信息

�👽 Taro v1.3.32


  Taro CLI 1.3.32 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.21.1 - C:\Program Files\nodejs\yarn.CMD
      npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Sanford284]

在google搜索和issue以及官方文档中都没有看到提到这个

[PlutoCA]

现在有配置方案不

[Junyan]

使用 Taro 3 可以，因为 Taro 3 支持通过 import * as React from 'react' 来使用 React。

[Sanford284]

taro3之后可以自己配置babel了，在babel中可以配置

[
  "react-css-modules", {
    "filetypes": {
      ".scss": {
        "syntax": "postcss-scss"
      }
    },
    "webpackHotModuleReloading": true,
    "exclude": "node_modules",
    "generateScopedName": "[local]_[hash:base64:5]"
  }
]

并且在小程序配置文件中配置

cssModules: {
  enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
  config: {
    namingPattern: 'module', // 转换模式，取值为 global/module
    generateScopedName: '[local]_[hash:base64:5]'
  }
}

[zousandian]

补充一下：

babel.config.js 类似这样：

module.exports = {
  presets: [
    [
      'taro',
      {
        framework: 'react',
        ts: true,
      },
    ],
  ],
  plugins: [
    [
      'react-css-modules',
      {
        filetypes: {
          '.scss': {
            syntax: 'postcss-scss',
            plugins: ['postcss-nested'],
          },
        },
        webpackHotModuleReloading: true,
        exclude: 'node_modules',
        generateScopedName: '[local]_[hash:base64:5]',
      },
    ],
  ],
};

注意 generateScopedName 需要和 config/index.js 中 cssModules 的配置一致

     cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[local]_[hash:base64:5]',
        },
      }

[aaabinbin]

@zousandian
想问下加上这个postcss-nested配置了之后，报错了，想问下你有遇到这个问题吗，我用的是less的，不知道有没有关系
PostCSS plugin postcss-nested requires PostCSS 8.

[lu576037375]

@zousandian 麻烦问下，我这样配置后，页面中的styleName没有生效，是什么问题呢

[cookie-zhang]

webpack5 之后babel-plugin-react-css-modules 还生效吗？ 我的怎么不生效了？

[845056166]

@lu576037375 配置好了，你看看代码😂