Rollup plugin for processing and bundling Sass/SCSS files with support for CSS modules, PostCSS integration, and multiple output formats
—
Comprehensive configuration options for rollup-plugin-sass, including file filtering, API selection, and Sass compiler settings.
Control which files are processed by the plugin using glob patterns.
interface FileFilterOptions {
/** File globs to include in processing. Default ['**/*.sass', '**/*.scss'] */
include?: string | string[];
/** File globs to exclude from processing. Default 'node_modules/**' */
exclude?: string | string[];
}Usage Examples:
import sass from 'rollup-plugin-sass';
// Include additional CSS files
sass({
include: ['**/*.css', '**/*.sass', '**/*.scss'],
});
// Exclude specific directories
sass({
exclude: ['node_modules/**', 'test/**/*.scss'],
});
// Multiple patterns
sass({
include: ['src/**/*.scss', 'styles/**/*.sass'],
exclude: ['src/vendor/**', 'styles/temp/**'],
});Choose between legacy and modern Sass APIs based on your Sass version and requirements.
interface ApiModeOptions {
/** API mode selection - 'legacy' (default) or 'modern' */
api?: 'legacy' | 'modern';
/** Sass compiler options specific to the selected API */
options?: SassModernOptions | SassLegacyOptions;
}Usage Examples:
// Legacy API (default)
sass({
api: 'legacy',
options: {
outputStyle: 'compressed',
includePaths: ['node_modules'],
},
});
// Modern API
sass({
api: 'modern',
options: {
style: 'compressed',
loadPaths: ['node_modules'],
},
});
// Modern API with NodePackageImporter for npm packages
import * as sass from 'sass';
sass({
api: 'modern',
options: {
importers: [new sass.NodePackageImporter()],
},
});Specify custom Sass runtime for compatibility with different Sass implementations.
interface RuntimeOptions {
/** Sass runtime instance - sass, node-sass or other compatible compiler */
runtime?: any;
}Usage Examples:
import * as sass from 'sass';
import * as nodeSass from 'node-sass';
// Use Dart Sass (default)
sass({
runtime: sass,
});
// Use Node Sass
sass({
runtime: nodeSass,
});Configure how and where the compiled CSS is output.
interface OutputOptions {
/**
* Output control:
* - false: no output (default)
* - true: output as .css file alongside JS bundle
* - string: specific file path
* - function: custom output handler
*/
output?: boolean | string | RollupPluginSassOutputFn;
}
type RollupPluginSassOutputFn = (
styles: string,
styleNodes: StyleSheetIdAndContent[]
) => unknown;Usage Examples:
// No output (styles embedded in JS)
sass({
output: false,
});
// Auto-generate CSS file
sass({
output: true, // Creates bundle.css if bundle is bundle.js
});
// Specific output file
sass({
output: 'dist/styles.css',
});
// Custom output handler
sass({
output(styles, styleNodes) {
console.log(`Generated ${styles.length} characters of CSS`);
writeFileSync('custom-bundle.css', styles);
},
});Inject compiled CSS directly into the HTML document head.
interface StyleInjectionOptions {
/** Insert compiled CSS into HTML head via utility function */
insert?: boolean;
}Usage Examples:
// Inject styles into document head
sass({
insert: true,
});
// Combined with other options
sass({
insert: true,
output: false, // Don't create CSS file when injecting
});Prepend data (variables, mixins) to all Sass files during compilation.
interface DataOptions {
/** Data to prepend to all Sass files */
data?: string;
}Usage Examples:
// Inject global variables
sass({
options: {
data: '$primary-color: #007bff; $font-size: 16px;',
},
});
// Import global mixins and variables
sass({
options: {
data: '@import "src/styles/variables"; @import "src/styles/mixins";',
},
});import sass from 'rollup-plugin-sass';
import * as dartSass from 'sass';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
},
plugins: [
sass({
// File filtering
include: ['src/**/*.scss', 'styles/**/*.sass'],
exclude: ['node_modules/**', 'test/**'],
// API configuration
api: 'modern',
runtime: dartSass,
// Output configuration
output: 'dist/styles.css',
insert: false,
// Sass options
options: {
style: 'compressed',
loadPaths: ['node_modules', 'src/styles'],
data: '@import "variables"; @import "mixins";',
},
}),
],
};Install with Tessl CLI
npx tessl i tessl/npm-rollup-plugin-sass