Nonchalantly Performs Magic

    babel-plugin-transform-scss

    1.1.0 • Public • Published

    babel-plugin-transform-scss

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

    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 babel-plugin-transform-scss or yarn add 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-scss-component="Button_style">
        .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.scss'
    
    const Button = () => {
      return (
        <div className="button">
          <div className="nested-from-style2">Nested</div>
        </div>
      )
    }
    
    export default Button
    Output
    <style data-scss-component="Button_style">
        .button {
          display: flex;
          justify-content: space-around;
        }
    </style>
    <style data-scss-component="Button_style2">
        .nested-from-style2 {
          display: grid;
        }
    </style>

    Install

    npm i babel-plugin-transform-scss

    DownloadsWeekly Downloads

    1,398

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    10.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • baumva