rollup-plugin-scss-smart-asset

rollup-plugin-scss-smart-asset

🍣 A Rollup plugin which import .scss, .sass, .css files, and rebase, inline or copy on url(). Based on node-sass, postcss and postcss-url. 中文

Installation

npm install --save-dev rollup-plugin-scss-smart-asset

Usage

// rollup.config.js
import scssSmartAsset from 'rollup-plugin-scss-smart-asset';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'es',
  },
  plugins: [
    scssSmartAsset()
  ]
})

Options

output

• Type: Boolean|String|Function (default: false)

scssSmartAsset({
  // 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 generateBundle with an arguments:
  // - styles: the concatenated styles in order of imported
  //  [
  //    { id: './style1.css', code: 'body {\n  color: red; }' , map: '...' },
  //    { id: './style2.css', code: 'body {\n  color: green; }' , map: '...' },
  //  ]
  output(styles) {
    writeFileSync("bundle.css", styles);
  }
});

insert

• Type: Boolean (default: false)

If you specify true, the plugin will insert compiled CSS into <head/> tag.

scssSmartAsset({
  insert: true
});

sassConfig

• Type: Object

Options for node-sass.

If you specify data, the plugin will treat as prepend sass string. Since you can inject variables during sass compilation with node.

scssSmartAsset({
  sassConfig: {
    data: "$color: #000;"
  }
});

postcssConfig

• Type: Object

Options for postcss.

Transforming styles with JS plugins .

scssSmartAsset({
  postcssConfig: {
    from: "src/navigation.css",
    to: "navigation.css"
  }
});

postcssUrlConfig

• Type: Object

Options for postcss-url.

PostCSS plugin to rebase, inline or copy on url().

scssSmartAsset({
  postcssUrlConfig: {
    url: "inline"
  }
});

License

MIT License

Copyright (c) 2019-present, zouyaoji [e-mail]

Example

vue-cesium