How To Use Sass With React

react-native-sass-transformer

Utilize Sass to style your React Native apps.

Behind the scenes the Sass files are transformed to react native style objects (wait at the examples).

This transformer can exist used together with React Native CSS modules.

How does it work?

Your App.scss file might look like this:

              %blue              {                              color              :              blue; }              .myClass              {              @extend              %blueish; }              .myOtherClass              {                              colour              :              cherry-red; }              .my-dashed-course              {                              color              :              green; }

When you import your stylesheet:

              import              styles              from              "./App.scss"              ;            

Your imported styles will look like this:

              var              styles              =              {              myClass:              {              color:              "blue"              }              ,              myOtherClass:              {              color:              "red"              }              ,              "my-dashed-class":              {              color:              "dark-green"              }              }              ;            

You can then use that style object with an element:

Plain React Native:

              <              MyElement              style              =              {              styles              .              myClass              }              /              >              <              MyElement              mode              =              {styles              [              "my-dashed-class"              ]              }              />

React Native CSS modules using className property:

              <              MyElement              className              =              {              styles              .              myClass              }              /              >              <              MyElement              className              =              {styles              [              "my-dashed-form"              ]              }              />

React Native CSS modules using styleName property:

              <              MyElement              styleName              =              "myClass my-dashed-grade"              /              >            

Please utilize the .scss file extension for SCSS syntax and the .sass file extension for indented Sass syntax.

Installation and configuration

Footstep i: Install

yarn add --dev react-native-sass-transformer sass

Step two: Configure the react native packager

For React Native v0.57 or newer / Expo SDK v31.0.0 or newer

Add this to metro.config.js in your project's root (create the file if it does non exist already):

              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"              ]              }              }              ;              }              )              (              )              ;            

If you are using Expo, yous as well need to add this to app.json:

{              "expo": {              "packagerOpts": {              "config":                              "metro.config.js"              ,              "sourceExts": [                "js"              ,                              "jsx"              ,                              "scss"              ,                              "sass"              ]     }   } }

---

For React Native v0.56 or older

If you are using React Native without Expo, add this to rn-cli.config.js in your project's root (create the file if you don't have one already):

              module              .              exports              =              {              getTransformModulePath              (              )              {              return              require              .              resolve              (              "react-native-sass-transformer"              )              ;              }              ,              getSourceExts              (              )              {              return              [              "js"              ,              "jsx"              ,              "scss"              ,              "sass"              ]              ;              }              }              ;            

---

For Expo SDK v30.0.0 or older

If you lot are using Expo, instead of adding the rn-cli.config.js file, you need to add this to app.json:

{              "expo": {              "packagerOpts": {              "sourceExts": [                "js"              ,                              "jsx"              ,                              "scss"              ,                              "sass"              ],              "transformer":                              "node_modules/react-native-sass-transformer/index.js"                            }   } }

Platform specific extensions

If yous need React Native's platform specific extensions for your Sass files, yous tin use babel-plugin-react-native-platform-specific-extensions. Platform specific extensions for files imported using Sass' @import are supported by default.

Sass options

If you demand to pass options (due east.grand. functions) to sass, you can do so by creating a transformer.js file and doing the following:

              // For React Native version 0.59 or later              var              upstreamTransformer              =              require              (              "metro-react-native-babel-transformer"              )              ;              // For React Native version 0.56-0.58              // var upstreamTransformer = require("metro/src/reactNativeTransformer");              // For React Native version 0.52-0.55              // var upstreamTransformer = crave("metro/src/transformer");              // For React Native version 0.47-0.51              // var upstreamTransformer = require("metro-bundler/src/transformer");              // For React Native version 0.46              // var upstreamTransformer = require("metro-bundler/build/transformer");              var              sassTransformer              =              require              (              "react-native-sass-transformer"              )              ;              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              (              )              /              xvi              )              ;              px              .              setUnit              (              "rem"              )              ;              render              px              ;              }              }              }              }              )              ;              return              sassTransformer              .              transform              (              {              src,              filename,              options:              opts              }              )              ;              }              else              {              render              upstreamTransformer              .              transform              (              {              src,              filename,              options              }              )              ;              }              }              ;            

Afterwards that in metro.config.js point the babelTransformerPath to that file:

              const              {              getDefaultConfig              }              =              crave              (              "metro-config"              )              ;              module              .              exports              =              (              async              (              )              =>              {              const              {              resolver:              {              sourceExts              }              }              =              expect              getDefaultConfig              (              )              ;              return              {              transformer:              {              babelTransformerPath:              require              .              resolve              (              "./transformer.js"              )              }              ,              resolver:              {              sourceExts:              [...sourceExts              ,              "scss"              ,              "sass"              ]              }              }              ;              }              )              (              )              ;            

CSS Custom Backdrop (CSS variables)

You lot need version 1.4.0 or newer

              :              root              {              --text-color              :              blue; }  .blue              {              color              :              var(--text-colour); }

CSS variables are not supported by default, just you can add together support for them by using PostCSS and postcss-css-variables plugin.

Start by installing dependencies:

yarn add postcss postcss-css-variables react-native-postcss-transformer --dev

Add together postcss-css-variables to your PostCSS configuration with i of the supported config formats, e.g. package.json, .postcssrc, postcss.config.js, etc.

After that create a transformer.js file and do the post-obit:

              // For React Native version 0.59 or afterwards              var              upstreamTransformer              =              require              (              "metro-react-native-babel-transformer"              )              ;              // For React Native version 0.56-0.58              // var upstreamTransformer = crave("metro/src/reactNativeTransformer");              // For React Native version 0.52-0.55              // var upstreamTransformer = require("metro/src/transformer");              // For React Native version 0.47-0.51              // var upstreamTransformer = require("metro-bundler/src/transformer");              // For React Native version 0.46              // var upstreamTransformer = require("metro-bundler/build/transformer");              var              sassTransformer              =              require              (              "react-native-sass-transformer"              )              ;              var              postCSSTransformer              =              crave              (              "react-native-postcss-transformer"              )              ;              module              .              exports              .              transform              =              function              (              {              src,              filename,              options              }              )              {              if              (              filename              .              endsWith              (              ".scss"              )              ||              filename              .              endsWith              (              ".sass"              )              )              {              return              sassTransformer              .              renderToCSS              (              {              src,              filename,              options              }              )              .              then              (              css              =>              postCSSTransformer              .              transform              (              {              src:              css              ,              filename,              options              }              )              )              ;              }              else              {              return              upstreamTransformer              .              transform              (              {              src,              filename,              options              }              )              ;              }              }              ;            

Later on that in metro.config.js point the babelTransformerPath to that file:

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

Dependencies

This library has the following Node.js modules as dependencies:

• app-root-path
• css-to-react-native-transform
• semver

How To Use Sass With React,

Source: https://github.com/kristerkari/react-native-sass-transformer

Posted by: pricewhave1982.blogspot.com

Share this post