咨询React Native CLI项目中SASS的其他可行实现方案

如果react-native-sass-transformer无法正常工作，你可以试试以下几种可行的方案：

方案一：预编译SASS为CSS再转成React Native样式 #

这种方法是先把SASS文件编译成普通CSS，再转换为React Native能识别的StyleSheet格式：

1. 安装依赖：

npm install sass css-to-react-native-transform --save-dev

2. 在项目根目录创建一个编译脚本（比如scripts/convert-sass.js），用来自动处理SASS文件：

const sass = require('sass');
const fs = require('fs');
const path = require('path');
const transform = require('css-to-react-native-transform').default;

// 定义SASS源目录和输出目录
const sassDir = path.join(__dirname, '../src/styles');
const outputDir = path.join(__dirname, '../src/styles/compiled');

// 确保输出目录存在
if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

// 遍历SASS文件
fs.readdirSync(sassDir).forEach(file => {
  if (file.endsWith('.scss') || file.endsWith('.sass')) {
    const inputPath = path.join(sassDir, file);
    const outputPath = path.join(outputDir, `${path.parse(file).name}.js`);
    
    // 编译SASS到CSS
    const result = sass.compile(inputPath);
    // 转换CSS为React Native样式对象
    const styleObject = transform(result.css);
    // 写入JS文件，导出StyleSheet
    const content = `import { StyleSheet } from 'react-native';\n\nexport default StyleSheet.create(${JSON.stringify(styleObject, null, 2)});`;
    
    fs.writeFileSync(outputPath, content);
  }
});

3. 在package.json里添加执行脚本：

"scripts": {
  "build:sass": "node scripts/convert-sass.js",
  "watch:sass": "nodemon --watch src/styles -e scss,sass --exec npm run build:sass"
}

4. 运行npm run build:sass编译一次，或者用npm run watch:sass监听文件变化自动编译，之后在组件里直接导入编译后的JS文件即可。

方案二：使用react-native-css-modules #

这个库支持CSS Modules语法，同时兼容SASS，配置步骤如下：

1. 安装依赖：

npm install react-native-css-modules sass sass-loader --save-dev

2. 修改metro.config.js配置，让Metro能识别SASS文件并处理：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig();
  return {
    ...defaultConfig,
    transformer: {
      babelTransformerPath: require.resolve('react-native-css-modules/lib/transformer'),
    },
    resolver: {
      sourceExts: [...defaultConfig.resolver.sourceExts, 'scss', 'sass'],
    },
  };
})();

3. 在组件中使用SASS模块：

import styles from './styles.module.scss';

// 用法示例
<View style={styles.container}>
  <Text style={styles.title}>Hello</Text>
</View>

方案三：轻量手动编译方案 #

如果不想配置复杂的工具链，可以手动调用SASS编译API，实时转换样式：

1. 安装依赖：

npm install sass css-to-react-native-transform --save-dev

2. 创建一个工具函数src/utils/sassHelper.js：

import sass from 'sass';
import { StyleSheet } from 'react-native';
import transform from 'css-to-react-native-transform';

export function loadSassStyle(filePath) {
  try {
    const result = sass.compile(filePath);
    const styleObj = transform(result.css);
    return StyleSheet.create(styleObj);
  } catch (err) {
    console.error('SASS编译错误:', err);
    return StyleSheet.create({});
  }
}

3. 在组件中使用：

import { loadSassStyle } from '../utils/sassHelper';

const styles = loadSassStyle('./styles.scss');

// 正常使用styles即可

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