CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rollup-plugin-sass

Rollup plugin for processing and bundling Sass/SCSS files with support for CSS modules, PostCSS integration, and multiple output formats

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration Options

Comprehensive configuration options for rollup-plugin-sass, including file filtering, API selection, and Sass compiler settings.

Capabilities

File Inclusion and Exclusion

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/**'],
});

API Mode Selection

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()],
  },
});

Sass Runtime Configuration

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,
});

Output Configuration

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);
  },
});

Style Injection

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
});

Data Prepending

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";',
  },
});

Complete Configuration Example

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

docs

advanced-features.md

configuration.md

index.md

tile.json