نحوه استفاده از Sass/SCSS با Expo SDK v48 و TypeScript

اگر شما یک توسعه‌دهنده اپلیکیشن موبایل هستید که از Expo استفاده می‌کنید، احتمالاً از قبل با ساختن یک برنامه با کیفیت بالا با حداقل تنظیمات آشنا هستید. با این حال، اگر به استفاده از Sass/SCSS در گردش کار توسعه وب خود عادت دارید، ممکن است تعجب کنید که چگونه آن را در پروژه Expo خود بگنجانید. در این آموزش، نحوه راه‌اندازی Sass/SCSS در پروژه Expo SDK v48 را با استفاده از TypeScript به شما آموزش می‌دهیم.

مرحله 1: ایجاد پروژه با expo v48

اولین قدمی که باید داشته باشید برای ایجاد یک پروژه نمایشگاهی با آخرین expo v48.

npx create-expo-app my-app
cd my-app

مرحله 2: Dependencies را نصب کنید

وابستگی های مورد نیاز برای Sass/SCSS برای کار با Expo SDK v48 و TypeScript را نصب کنید. دستور زیر را در ترمینال خود اجرا کنید:

npm install babel-plugin-react-native-classname-to-style babel-plugin-react-native-platform-specific-extensions node-sass react-native-sass-transformer

اگر می خواهید ایجاد کنید .d.ts فایل برای شما .scss فایل ها را اضافه کنید react-native-typed-sass-transformer بجای react-native-sass-transformer

مرحله 3: package.json را به روز کنید

در این مرحله باید آپدیت کنیم package.json برای استفاده react-native از مخزن github. این مورد برای استفاده لازم است className پشتیبانی بر روی عناصر بومی واکنش نشان می دهد. به روز رسانی react-native با موارد زیر:

"dependencies": {
    "react-native": "gihanrangana/react-native#v0.71.3"
}

مرحله 4: babel.config.js را پیکربندی کنید

حالا باید آپدیت کنیم babel.config.js به صورت زیر فایل کنید

//babel.config.js
module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: [
            "react-native-classname-to-style",
            [
                "react-native-platform-specific-extensions",
                { extensions: ["scss", "sass"] },
            ],
        ],
    };
};

مرحله 5: metro.config.js را پیکربندی کنید

در این مرحله تنظیمات را انجام می دهیم metro.config.js برای تبدیل سبک ها از .scss یا .sass فایل ها.

ابتدا ایجاد کنید transformer.js فایل در root پروژه به شرح زیر است:

//transformer.js
cosnt upstreamTransformer = require("metro-react-native-babel-transformer");
const sassTransformer = require("react-native-sass-transformer");

const theme = (process.cwd() + "/src/styles/Global.scss").replace(/\\/g, "/");

module.exports.transform = function ({ src, filename, options }) {
    if (filename.endsWith(".scss") || filename.endsWith(".sass")) {
        var opts = Object.assign(options, {
            sassOptions: {
                functions: {
                    "rem($px)": px => {
                        px.setValue(px.getValue() / 16);
                        px.setUnit("rem");
                        return px;
                    }
                }
            }
        });

        src = `@import "${theme}"; \n\n ` + src;

        return sassTransformer.transform({ src, filename, options: opts });
    } else {
        return upstreamTransformer.transform({ src, filename, options });
    }
};

این فایل تمام فایل‌های scss را که در پروژه خود وارد می‌کنید تغییر می‌دهد. یک نکته مثبت وجود دارد،

می توانید ایجاد کنید Global.scss فایل های زیر src/styles/ فهرست راهنما. در آن فایل شما می توانید متغیرهای sass خود را ایجاد کنید، سپس می توانید از هر متغیر sass که در آن اعلام کرده اید استفاده کنید. Global.scss هر ابزاری در پروژه شما در سطح جهانی بدون وارد کردن.

حالا برای ایجاد باید این دستور را اجرا کنید metro.config.js فایل:

npx expo customize metro.config.js

این دستور فایلی به نام ایجاد می کند metro.config.js، پس از آن فایل به روز رسانی به صورت زیر است:

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

const { resolver: { sourceExts } } = config;

config.transformer.babelTransformerPath = require.resolve("./transformer.js");
config.resolver.sourceExts = [...sourceExts, "scss", "sass"];

module.exports = config;

باشه عالیه! شما اکنون با تنظیمات تمام شده اید. بیایید آن را تست کنیم!

فایلی به نام index.js در ریشه پروژه با این محتوا ایجاد کنید

//index.js
import { registerRootComponent } from "expo";
import App from "./src/App";

registerRootComponent(App)

بسته.json را به صورت زیر به روز کنید:

"main": "index.js",

ایجاد دایرکتوری به نام src و حرکت کند App.tsx به آن

ايجاد كردن App.scss درون src فهرست راهنما

/*App.scss*/
.container {
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: $bg;
    padding: 10px;
}

.text {
    color: $light0;
    font-size: rem(24px);
    text-align: center;
}

به روز رسانی App.tsx به شرح زیر است:

// App.tsx
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';

import styles from './App.scss';

export default function App() {
  return (
    <View className={styles.container}>
      <Text className={styles.text}>This is app using scss to create styling the components</Text>
      <StatusBar style="auto" />
    </View>
  );
}

حالا برنامه را با npm start، خروجی اینگونه خواهید داشت

برای درک بهتر این پیکربندی، این مخزن را ببینید:
expo-sdk-48-sass-transformer-ts

نتیجه

استفاده از Sass/SCSS با Expo SDK v48 و TypeScript می‌تواند گردش کار توسعه برنامه تلفن همراه شما را با اجازه دادن به شما برای نوشتن شیوه نامه‌های مدولارتر و قابل نگهداری، بهبود بخشد. تنها با چند مرحله ساده، می‌توانید babel و metro را برای مدیریت فایل‌های Sass/SCSS تنظیم کنید و آنها را در پروژه TypeScript خود بگنجانید. از آنجا، می‌توانید کد Sass/SCSS بنویسید و آن را در فایل‌های TypeScript خود وارد کنید. به طور کلی، ترکیب Sass/SCSS در پروژه Expo می‌تواند استایل شما را کارآمدتر، سازمان‌دهی‌شده، مقیاس‌پذیرتر کند و همچنین می‌توانید از همان شیوه نامه استفاده کنید. mobile app to web app یا web app to mobile app به آسانی.