在 React Native 中使用 CSS Modules的配置方法_React_

yarn add react-native-sass-transformer sass -D

const { getDefaultConfig } = require("metro-config") module.exports = (async () => { const { resolver: { sourceExts }, } = await getDefaultConfig() return { transformer: { babelTransformerPath: require.resolve("react-native-sass-transformer"), }, resolver: { sourceExts: [...sourceExts, "scss", "sass"], }, } })()

yarn add babel-plugin-react-native-classname-to-style \ babel-plugin-react-native-platform-specific-extensions -D

module.exports = { presets: ["module:metro-react-native-babel-preset"], plugins: [ "react-native-classname-to-style", [ "react-native-platform-specific-extensions", { extensions: ["scss", "sass"], }, ], ], }

declare module "*.scss"

@mixin lightFontStyle($fontColor: rgb(0, 0, 0)) { font-size: 22px; font-family: $sencodary-font-light; letter-spacing: 0.96px; color: $fontColor; } .input { @include lightFontStyle($fontColor: rgb(39, 39, 39)); padding: 12px 20px 40px; flex: 1; } .disabled { @extend .input; color: rgb(99, 99, 99); }

// App.scss @import "./theme/font.scss"; .welcome { font-family: $primary-font; font-size: 17px; text-align: center; }

//App.tsx import React from "react" import { Text, StyleSheet } from "react-native" import scss from "./App.scss" function Welcome(props: Props) { return Hello {props.name}! } const styles = StyleSheet.create({ text: { backgroundColor: "transparent", margin: 8, }, })