UNPKG

2.91 kBMarkdownView Raw
1# Rollup multiple .scss, .sass and .css imports
2
3### Integrates nicely with rollup-plugin-vue2
4
5<a href="LICENSE">
6 <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="Software License" />
7</a>
8<a href="https://github.com/thgh/rollup-plugin-scss/issues">
9 <img src="https://img.shields.io/github/issues/thgh/rollup-plugin-scss.svg" alt="Issues" />
10</a>
11<a href="http://standardjs.com/">
12 <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg" alt="JavaScript Style Guide" />
13</a>
14<a href="https://npmjs.org/package/rollup-plugin-scss">
15 <img src="https://img.shields.io/npm/v/rollup-plugin-scss.svg?style=flat-squar" alt="NPM" />
16</a>
17<a href="https://github.com/thgh/rollup-plugin-scss/releases">
18 <img src="https://img.shields.io/github/release/thgh/rollup-plugin-scss.svg" alt="Latest Version" />
19</a>
20
21## Installation
22```
23# Rollup v0.60+ and v1+
24npm install --save-dev rollup-plugin-scss
25
26# Rollup v0.59 and below
27npm install --save-dev rollup-plugin-scss@0
28```
29
30## Usage
31```js
32// rollup.config.js
33import scss from 'rollup-plugin-scss'
34
35export default {
36 entry: 'entry.js',
37 dest: 'bundle.js',
38 plugins: [
39 scss() // will output compiled styles to bundle.css
40 ]
41}
42```
43
44```js
45// entry.js
46import './reset.css'
47```
48
49### Options
50
51Options are passed to [node-sass].
52By default the plugin will base the filename for the css on the bundle destination.
53
54```js
55scss({
56 //Choose *one* of these possible "output:..." options
57 // Default behaviour is to write all styles to the bundle destination where .js is replaced by .css
58 output: true,
59
60 // Filename to write all styles to
61 output: 'bundle.css',
62
63 // Callback that will be called ongenerate with two arguments:
64 // - styles: the contents of all style tags combined: 'body { color: green }'
65 // - styleNodes: an array of style objects: { filename: 'body { ... }' }
66 output: function (styles, styleNodes) {
67 writeFileSync('bundle.css', styles)
68 },
69
70 // Disable any style output or callbacks, import as string
71 output: false,
72
73 // Determine if node process should be terminated on error (default: false)
74 failOnError: true,
75})
76```
77
78## Changelog
79
80Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
81
82## Contributing
83
84Contributions and feedback are very welcome.
85
86To get it running:
87 1. Clone the project.
88 2. `npm install`
89
90## Credits
91
92- [Thomas Ghysels](https://github.com/thgh)
93- [All Contributors][link-contributors]
94
95## License
96
97The MIT License (MIT). Please see [License File](LICENSE) for more information.
98
99[link-author]: https://github.com/thgh
100[link-contributors]: ../../contributors
101[rollup-plugin-vue]: https://www.npmjs.com/package/rollup-plugin-vue
102[rollup-plugin-buble]: https://www.npmjs.com/package/rollup-plugin-buble
103[rollup-plugin-babel]: https://www.npmjs.com/package/rollup-plugin-babel
104[node-sass]: https://www.npmjs.com/package/node-sass