rollup-plugin-sass
v1.14.0
Published
Rollup Sass files.
Downloads
88,316
Readme
rollup-plugin-sass
Installation
npm install rollup-plugin-sass -D
Usage
// rollup.config.js
import sass from 'rollup-plugin-sass';
export default {
input: 'index.js',
output: {
file: 'bundle.js',
format: 'cjs',
},
plugins: [sass()],
};
rollup.config.ts
Add allowSyntheticDefaultImports
, or esModuleInterop
(enables allowSyntheticDefaultImports
), to tsconfig.json:
{
"compilerOptions": {
"esModuleInterOp": true
}
}
Reference: (https://www.typescriptlang.org/tsconfig#esModuleInterop)
Write rollup.config.ts:
// rollup.config.ts
import sass from 'rollup-plugin-sass';
// ...
Profit.
Options
output
- Type:
Boolean|String|Function
(default: false)
sass({
// Default behaviour disable output
output: false,
// Write all styles to the bundle destination where .js is replaced by .css
output: true,
// Filename to write all styles
output: 'bundle.css',
// Callback that will be called ongenerate with two arguments:
// - styles: the concatenated styles in order of imported
// - styleNodes: an array of style objects:
// [
// { id: './style1.scss', content: 'body { color: red };' },
// { id: './style2.scss', content: 'body { color: green };' }
// ]
output(styles, styleNodes) {
writeFileSync('bundle.css', styles);
},
});
insert
- Type:
Boolean
(default: false)
If you specify true
, the plugin will insert compiled CSS into <head/>
tag, via utility function that it will output
in your build bundle.
sass({
insert: true,
});
processor
- Type:
Function
If you specify a function as processor which will be called with compiled css before generate phase.
import autoprefixer from 'autoprefixer';
import postcss from 'postcss';
sass({
// Processor will be called with two arguments:
// - style: the compiled css
// - id: import id
processor: (css) =>
postcss([autoprefixer])
.process(css)
.then((result) => result.css),
});
The processor
also support object result. Reverse css
filLed for stylesheet, the rest of the properties can be customized.
sass({
processor(code) {
return {
css: '.body {}',
foo: 'foo',
bar: 'bar',
};
},
});
Otherwise, you could do:
import style, { foo, bar } from 'stylesheet';
Exporting sass variable to *.js
Example showing how to use icss-utils to extract resulting sass vars to your *.js bundle:
const config = {
input: 'test/fixtures/processor-promise/with-icss-exports.js',
plugins: [
sass({
processor: (css) =>
new Promise((resolve, reject) => {
const pcssRootNodeRslt = postcss.parse(css),
extractedIcss = extractICSS(pcssRootNodeRslt, true),
cleanedCss = pcssRootNodeRslt.toString(),
out = Object.assign({}, extractedIcss.icssExports, {
css: cleanedCss,
});
// console.table(extractedIcss);
// console.log(out);
resolve(out);
}),
options: sassOptions,
}),
],
};
See the Input file for example on how to access the exported vars.
runtime
- Type:
Object
(default: sass)
If you specify an object, it will be used instead of sass. You can use this to pass a different sass compiler (for example the node-sass
npm package).
options
- Type:
Object
Options for sass or your own runtime sass compiler.
If you specify data
, the plugin will treat as prepend sass string.
Since you can inject variables during sass compilation with node.
sass({
options: {
data: '$color: #000;',
},
});
include
- Type:
string | string[]
- Default:
['**/*.sass', '**/*.scss']
Glob of sass/css files to be targeted.
sass({
include: ['**/*.css', '**/*.sass', '**/*.scss'],
});
exclude
- Type:
string | string[]
; - Default:
'node_modules/**'
Globs to exclude from processing.
sass({
exclude: 'node_modules/**',
});