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+
|
24 | npm install --save-dev rollup-plugin-scss
|
25 |
|
26 | # Rollup v0.59 and below
|
27 | npm install --save-dev rollup-plugin-scss@0
|
28 | ```
|
29 |
|
30 | ## Usage
|
31 | ```js
|
32 | // rollup.config.js
|
33 | import scss from 'rollup-plugin-scss'
|
34 |
|
35 | export 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
|
46 | import './reset.css'
|
47 | ```
|
48 |
|
49 | ### Options
|
50 |
|
51 | Options are passed to [node-sass].
|
52 | By default the plugin will base the filename for the css on the bundle destination.
|
53 |
|
54 | ```js
|
55 | scss({
|
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 |
|
80 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
|
81 |
|
82 | ## Contributing
|
83 |
|
84 | Contributions and feedback are very welcome.
|
85 |
|
86 | To 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 |
|
97 | The 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
|