react-native-typed-sass-transformer
Load Sass files to react native style objects.
This transformer also generates .d.ts
Typescript typings for the Sass files. Notice that platform specific extensions are not supported in the Typescript typings.
This transformer can be used together with React Native CSS modules.
Usage
Please use the .scss
file extension for SCSS syntax and the .sass
file extension for indented Sass syntax.
Step 1: Install
yarn add --dev react-native-typed-sass-transformer node-sass
Step 2: 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 not exist already):
const getDefaultConfig = ; moduleexports = async { const resolver: sourceExts } = await ; return transformer: babelTransformerPath: require resolver: sourceExts: ...sourceExts "scss" "sass" ;};
If you are using Expo, you also need to add this to app.json
:
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):
moduleexports = { return require; } { return "ts" "tsx" "scss" "sass"; };
For Expo SDK v30.0.0 or older
If you are using Expo, instead of adding the rn-cli.config.js
file, you need to add this to app.json
:
How does it work?
Your App.scss
file might look like this:
%blue .myClass .myOtherClass
When you import your stylesheet:
;
Your imported styles will look like this:
var styles = myClass: color: "blue" myOtherClass: color: "red" ;
The generated App.scss.d.ts
file looks like this:
;;
You can then use that style object with an element:
<MyElement = />
Platform specific extensions
If you need React Native's platform specific extensions for your Sass files, you can 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 need to pass options (e.g. functions) to node-sass
, you can do so by creating a transformer.js
file and doing the following:
// For React Native version 0.59 or latervar upstreamTransformer = ; // For React Native version 0.56-0.58// var upstreamTransformer = require("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 = ; moduleexports { if filename || filename var opts = Object; return sassTransformer; else return upstreamTransformer; };
After that in metro.config.js
point the babelTransformerPath
to that file:
const getDefaultConfig = ; moduleexports = async { const resolver: sourceExts } = await ; return transformer: babelTransformerPath: require resolver: sourceExts: ...sourceExts "scss" "sass" ;};
CSS Custom Properties (CSS variables)
You need version 0.11.0 or newer
CSS variables are not supported by default, but you can add 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 postcss-css-variables
to your PostCSS configuration with one of the supported config formats, e.g. package.json
, .postcssrc
, postcss.config.js
, etc.
After that create a transformer.js
file and do the following:
// For React Native version 0.59 or latervar upstreamTransformer = ; // For React Native version 0.56-0.58// var upstreamTransformer = require("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 = ;var postCSSTransformer = ; moduleexports { if filename || filename return sassTransformer ; else return upstreamTransformer; };
After that in metro.config.js
point the babelTransformerPath
to that file:
const getDefaultConfig = ; moduleexports = async { const resolver: sourceExts } = await ; return transformer: babelTransformerPath: require resolver: sourceExts: ...sourceExts "scss" "sass" ;};