@ptenn/babel-plugin-transform-scss

This repository has been forked from babel-plugin-transform-scss.

Babel plugin for converting scss or sass imports to css and embedding them in the head of the document.

It includes a type check on document to prevent errors on the server.

This plugin completely replaces the standard webpack sass-loader. This part of code can be removed:

module: {
  rules: [
    //rules
    {
      test: /\.s[ac]ss$/i,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

Installation

npm install @ptenn/babel-plugin-transform-scss or yarn add @ptenn/babel-plugin-transform-scss

Use it in your config file:

{
  "presets": [],
  "plugins": [
    "babel-plugin-transform-scss"
  ]
}

How it works

This plugin looks for import of sass or scss files, when imports are found - imported files replaces with function which renders pure css to the head of the document.

import React from 'react'
import 'style.scss'

const Button = () => {
  return (
    <div className="button">
      Custom button
    </div>
  )
}

export default Button

import "style.scss" will be transpiled to css and will be rendered to the head of the document:

<style data-component-scss-styles="button_style_5477384d9f0569cd95f28d5a17c54741">
    .button {
      display: flex;
      justify-content: space-around;
    }
</style>

if import contains more than one styles:

Input

import React from 'react'
import 'style.scss'
import 'style2.sass'

const Button = () => {
  return (
    <div className="button">
      <div className="nested-from-style2">Nested</div>
    </div>
  )
}

export default Button

Output

<style data-component-scss-styles="button_style_5477384d9f0569cd95f28d5a17c54741"">
    .button {
      display: flex;
      justify-content: space-around;
    }
</style>
<style data-component-sass-styles="button_style2_cb08277efa67d7e3dd6a9937287d6795"">
    .nested-from-style2 {
      display: grid;
    }
</style>