Need help with react-native-sass-transformer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kristerkari
148 Stars 12 Forks MIT License 92 Commits 11 Opened issues

Description

Use Sass to style your React Native apps.

Services available

!
?

Need anything else?

Contributors list

# 39,009
React N...
iOS
Sass
Markdow...
69 commits
# 314,553
HTML
React N...
Sass
transfo...
3 commits

react-native-sass-transformer NPM version Downloads per month contributions welcome

Use Sass to style your React Native apps.

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

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

How does it work?

Your

App.scss
file might look like this:
%blue {
  color: blue;
}
.myClass {
  @extend %blue;
}
.myOtherClass {
  color: red;
}
.my-dashed-class {
  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: "green"
  }
};

You can then use that style object with an element:

Plain React Native:

React Native CSS modules using className property:

React Native CSS modules using styleName property:


Please use the

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

Installation and configuration

Step 1: Install

yarn add --dev react-native-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 } = 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, you also 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 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 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 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 = 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");

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; } } } }); return sassTransformer.transform({ src, filename, options: opts }); } else { return upstreamTransformer.transform({ src, filename, options }); } };

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

CSS Custom Properties (CSS variables)

You need version 1.4.0 or newer

:root {
  --text-color: blue;
}

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

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

After 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:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.