Newfangled Package Modernizer

    rollup-plugin-sass
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.10 • Public • Published

    rollup-plugin-sass CircleCI issues npm mit Coverage Status

    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.

    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 filed for stylesheet, the rest properties can be customized.

    sass({
      processor(code) {
        return {
           css: '.body {}',
           foo: 'foo',
           bar: 'bar',
        };
      },
    })

    Otherwise, you could do:

    import style, { foo, bar } from 'stylesheet';

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

    License

    MIT © BinRui.Guan

    Install

    npm i rollup-plugin-sass

    DownloadsWeekly Downloads

    10,957

    Version

    1.2.10

    License

    MIT

    Unpacked Size

    26.4 kB

    Total Files

    16

    Last publish

    Collaborators

    • differui
    • elycruz