rollup-plugin-simple-scss v2.0.0
rollup-simple-scss
This project started as a fork of rollup-plugin-scss but has received several improvements to make it easier to use and to be more compliant with the rollup way of doing things.
It is now easier to integrate this plugin with existing frameworks like VueJS
, Angular
, and React
.
Installation
# Rollup v0.60+ and v1+
npm install --save-dev rollup-plugin-simple-scss
Usage
// rollup.config.js
import scss from 'rollup-plugin-simple-scss'
export default {
input: 'input.js',
output: {
file: 'output.js',
format: 'iife'
},
plugins: [
scss()
]
}
// entry.js
import './reset.scss'
This would parse and minify reset.scss
and if the CSS output is small enough it will be inlined using data URLs otherwise a new CSS file will be included in the build output.
It is also possible to receive the URL which can be used to fetch this file which makes it compatible with VueJS
, Angular
and React
.
Here an React example
import style from './reset.scss';
...
<link rel='style' href={style}>
...
Receiving CSS output as a string
If you need the css output as a string in your javascript code and don't want to produce an additional css output file you can do this by adding the content:
prefix to the import.
import style from 'content:./reset.scss';
console.log(style);
This would print the parsed css output.
Options
Options are passed to node-sass, so that you can include all the options which node-sass supports.
scss({
// specify the maximum size(byte).
// CSS output which does not exceed the limit will be inlined using
// data URLs.
limit: 4096
// Determine if build process should be terminated on error (default: false)
failOnError: true,
})
Contributing
Contributions and feedback are very welcome.
To get it running:
1. Clone the project.
2. npm install
Credits
License
The MIT License (MIT). Please see License File for more information.