rollup-plugin-sass2 v3.1.4

Rollup Plugin for Sass

Bundle sass,scss and css files\ Folder support \ Watch mode support\ Rebase relative assets

Installation

npm install rollup-plugin-sass2 --save-dev 

Options

See the Node Sass options, except for file.

Usage

Base Example

// bundle all styles imports from javascript in one file "dest/app.css"
import sass from 'rollup-plugin-sass2';

export default {
    input:'src/app.js',
    output:{
        format:'esm',
        file:'dest/app.js'
    },
    plugins: [
        sass()
    ]
};

Custom file

// bundle all styles imports from javascript in one file "css/default.css"
import sass from 'rollup-plugin-sass2';

export default {
    input:'src/app.js',
    output:{
        format:'esm',//any format
        file:'dest/app.js'
    },
    plugins: [
        sass({ 
            outFile:'css/default.css'
        })
    ]
};

Example without javascript

// bundle all in one file "css/main.css"
import sass from 'rollup-plugin-sass2';

export default {
    input:'src/main.scss',
    output:{
        format:'esm',// only esm format support
        file:'css/main.css'
    },
    plugins: [
        sass()
    ]
};

Multiple export example

//rollup.config.js
import sass from 'rollup-plugin-sass2';
export default {
    input:'src/app.js',
    output:{
        format:'esm',//any format
        dir:'dest'
    },
    plugins: [
        sass()
    ]
};

//src/app.js
import './styles/main.scss';
import './styles/default.scss';

/*
 rollup create files:
    "dest/app.js"
    "dest/main.css"
    "dest/default.css"
*/

Custom Folder

import sass from 'rollup-plugin-sass2';

export default {
    input:'src/app.js',
    output:{
        format:'esm',
        file:'src/app.js'
    },
    plugins: [
        sass({outDir:'css'})
    ]
};

Watch example

package.json

{
  "scripts": {
      "build": "rollup -c -w"
  }
}