是否有方法可自动将普通CSS转换为React可用的Modular CSS？

自动化转换（无需手动修改大量文件） #

最常用的方式是基于PostCSS生态写自定义脚本批量处理，全程自动运行，适配任意规模的CSS文件：

• 第一步：安装依赖
  执行命令npm install postcss postcss-selector-parser glob --save-dev
• 第二步：编写转换脚本，以下是可直接使用的示例：

const fs = require('fs')
const path = require('path')
const postcss = require('postcss')
const selectorParser = require('postcss-selector-parser')
const glob = require('glob')

// 配置项：原CSS目录、输出.module.css的目录
const INPUT_CSS_DIR = path.join(__dirname, './src/css')
const OUTPUT_MODULE_CSS_DIR = path.join(__dirname, './src/css-modules')

// 转换规则：把所有非类选择器转为类选择器
const transformSelector = selectorParser(selectors => {
  selectors.walk(selector => {
    // 元素选择器转类选择器，比如 button 转 .button
    if (selector.type === 'tag') {
      const className = selector.value
      selector.replaceWith(selectorParser.className({ value: className }))
    }
    // ID选择器转类选择器，比如 #header 转 .header
    if (selector.type === 'id') {
      const className = selector.value
      selector.replaceWith(selectorParser.className({ value: className }))
    }
    // 可自定义添加其他转换规则，比如后代选择器、属性选择器的处理逻辑
  })
})

// 批量处理所有CSS文件
glob.sync(`${INPUT_CSS_DIR}/**/*.css`).forEach(filePath => {
  const cssContent = fs.readFileSync(filePath, 'utf8')
  postcss([
    {
      postcssPlugin: 'selector-to-class',
      Rule (rule) {
        rule.selector = transformSelector.processSync(rule.selector)
      }
    }
  ]).process(cssContent, { from: undefined }).then(result => {
    const relativePath = path.relative(INPUT_CSS_DIR, filePath)
    const outputPath = path.join(OUTPUT_MODULE_CSS_DIR, relativePath.replace('.css', '.module.css'))
    fs.mkdirSync(path.dirname(outputPath), { recursive: true })
    fs.writeFileSync(outputPath, result.css)
    console.log(`转换完成：${outputPath}`)
  })
})

• 第三步：运行脚本，所有原CSS文件会自动转为符合CSS Modules规范的类选择器文件，输出到指定目录。

转换示例 #

你给出的原始CSS：

button {   
    background-color: #316fbe;   
    width: 100%;  
    color:black;   
    padding: 15px;   
    margin: 10px 0px;   
    border: none;   
    cursor: pointer;
    font-size: 18px;   
}

转换后结果：

.button {   
    background-color: #316fbe;   
    width: 100%;  
    color:black;   
    padding: 15px;   
    margin: 10px 0px;   
    border: none;   
    cursor: pointer;
    font-size: 18px;   
}

React组件中使用方式：

import styles from './xxx.module.css'

function MyComponent() {
  return <button className={styles.button}>提交</button>
}

注意事项 #

• 全局通用样式（比如*通用选择器、:root CSS变量、body基础样式）建议单独抽离为全局CSS文件引入，无需转换为CSS Modules
• 可以自定义转换规则，比如给转换后的类名加统一前缀，避免和你后续新增的类名冲突
• 后代选择器比如form input会自动转为.form .input，只需要给对应的JSX标签依次绑定对应的class即可，伪类、伪元素的样式不会受转换影响

内容的提问来源于stack exchange，提问作者ArchyInUse