如何在React Native应用中配置CSS Less并整合自定义Less文件

React Native 本身不原生支持Less语法，运行时解析Less的第三方实现普遍存在维护停滞、性能不足、兼容性差的问题，所以推荐使用本地预编译Less为RN原生支持的StyleSheet对象的方案，无运行时依赖，可维护性和可靠性更高。

方案：自定义预编译脚本方案（推荐，最高可控性） #

该方案仅在开发/打包阶段执行脚本将Less编译为RN可用的JS/TS样式文件，运行时完全不需要额外依赖，稳定性拉满。

操作步骤 #

1. 项目目录准备
   在项目根目录新建styles/less文件夹存放所有设计系统提供的Less文件，新建styles/generated文件夹存放编译后的输出文件。
2. 安装必要开发依赖
   所有依赖均为业界广泛使用、长期维护的稳定工具：

• less：负责编译Less源码为CSS
• camelcase：负责将kebab-case的类名、CSS属性转换为RN样式适配的驼峰格式

3. 编写编译脚本
   在项目根目录新建compile-less.js，内容如下：

const fs = require('fs');
const path = require('path');
const less = require('less');
const camelcase = require('camelcase');

// 路径配置
const LESS_INPUT_DIR = path.join(__dirname, 'styles/less');
const JS_OUTPUT_DIR = path.join(__dirname, 'styles/generated');

// 单文件编译逻辑
async function processLessFile(filePath) {
  const fileContent = fs.readFileSync(filePath, 'utf8');
  // 编译Less为CSS，原生支持变量、混合、嵌套等Less特性
  const { css } = await less.render(fileContent, {
    paths: [LESS_INPUT_DIR], // 支持Less的@import跨文件引用
  });
  // CSS转RN StyleSheet兼容的JS对象
  const styleJsObj = parseCssToRNObj(css);
  // 生成输出文件内容
  const outputContent = `import { StyleSheet } from 'react-native';\n\nexport default StyleSheet.create(${JSON.stringify(styleJsObj, null, 2)});\n`;
  // 写入输出文件
  const outputFileName = path.basename(filePath, '.less') + '.js';
  fs.writeFileSync(path.join(JS_OUTPUT_DIR, outputFileName), outputContent);
}

// CSS字符串转RN样式对象核心逻辑
function parseCssToRNObj(cssStr) {
  const result = {};
  // 匹配所有类选择器和对应样式块
  const classRegex = /\.([a-zA-Z0-9-_]+)\s*\{([^}]+)\}/g;
  let match;
  while ((match = classRegex.exec(cssStr)) !== null) {
    const className = camelcase(match[1]);
    const styleBlock = match[2].trim();
    const styleObj = {};
    // 拆分单条样式规则
    styleBlock.split(';').forEach(rule => {
      if (!rule.trim()) return;
      const [cssProp, value] = rule.split(':').map(item => item.trim());
      const rnProp = camelcase(cssProp);
      // 自动去除px单位适配RN数值类型样式
      if (!isNaN(Number(value.replace('px', '')))) {
        styleObj[rnProp] = Number(value.replace('px', ''));
      } else {
        styleObj[rnProp] = value;
      }
    });
    result[className] = styleObj;
  }
  return result;
}

// 批量遍历处理所有Less文件
fs.readdirSync(LESS_INPUT_DIR).forEach(file => {
  if (file.endsWith('.less')) {
    processLessFile(path.join(LESS_INPUT_DIR, file)).catch(err => console.error('Less编译失败：', err));
  }
});

4. 配置触发规则
   在package.json的scripts字段中添加如下配置，保证开发、打包前自动执行最新编译：

"compile:less": "node compile-less.js",
"dev": "npm run compile:less && react-native start",
"build:android": "npm run compile:less && cd android && ./gradlew assembleRelease",
"build:ios": "npm run compile:less && xcodebuild <你的iOS打包参数>"

如果需要开发阶段自动监听Less文件变更触发编译，可以安装chokidar工具编写监听逻辑，无需手动执行命令。
5. 业务代码使用

import DesignSystemStyles from './styles/generated/design-system.js';

// 组件中直接调用对应样式即可
<View style={DesignSystemStyles.cardContainer}>
  <Text style={DesignSystemStyles.primaryTitle}>测试文本</Text>
</View>

注意事项 #

• 不要在Less中编写浏览器专属的不兼容RN的样式属性，编译前可自行扩展过滤逻辑
• 提前检查设计系统的Less类名，避免重名导致编译后样式覆盖
• 如果需要TS类型提示，可以安装less-plugin-dts依赖，编译时同步生成样式的d.ts类型声明文件

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