1 | # Rollup multiple .scss, .sass and .css imports
|
2 |
|
3 | <a href="LICENSE">
|
4 | <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="Software License" />
|
5 | </a>
|
6 | <a href="https://github.com/thgh/rollup-plugin-scss/issues">
|
7 | <img src="https://img.shields.io/github/issues/thgh/rollup-plugin-scss.svg" alt="Issues" />
|
8 | </a>
|
9 | <a href="http://standardjs.com/">
|
10 | <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg" alt="JavaScript Style Guide" />
|
11 | </a>
|
12 | <a href="https://npmjs.org/package/rollup-plugin-scss">
|
13 | <img src="https://img.shields.io/npm/v/rollup-plugin-scss.svg?style=flat-squar" alt="NPM" />
|
14 | </a>
|
15 | <a href="https://github.com/thgh/rollup-plugin-scss/releases">
|
16 | <img src="https://img.shields.io/github/release/thgh/rollup-plugin-scss.svg" alt="Latest Version" />
|
17 | </a>
|
18 |
|
19 | ## Installation
|
20 | ```
|
21 | # Rollup v0.60+ and v1+
|
22 | npm install --save-dev rollup-plugin-scss
|
23 |
|
24 | # Rollup v0.59 and below
|
25 | npm install --save-dev rollup-plugin-scss@0
|
26 | ```
|
27 |
|
28 | ## Usage
|
29 | ```js
|
30 | // rollup.config.js
|
31 | import scss from 'rollup-plugin-scss'
|
32 |
|
33 | export default {
|
34 | input: 'input.js',
|
35 | output: {
|
36 | file: 'output.js',
|
37 | format: 'esm'
|
38 | },
|
39 | plugins: [
|
40 | scss() // will output compiled styles to output.css
|
41 | ]
|
42 | }
|
43 | ```
|
44 |
|
45 | ```js
|
46 | // entry.js
|
47 | import './reset.scss'
|
48 | ```
|
49 |
|
50 | ### Options
|
51 |
|
52 | Options are passed to the sass compiler ([node-sass] by defaut).
|
53 | By default the plugin will base the filename for the css on the bundle destination.
|
54 |
|
55 | ```js
|
56 | scss({
|
57 | // Choose *one* of these possible "output:..." options
|
58 | // Default behaviour is to write all styles to the bundle destination where .js is replaced by .css
|
59 | output: true,
|
60 |
|
61 | // Filename to write all styles to
|
62 | output: 'bundle.css',
|
63 |
|
64 | // Callback that will be called ongenerate with two arguments:
|
65 | // - styles: the contents of all style tags combined: 'body { color: green }'
|
66 | // - styleNodes: an array of style objects: { filename: 'body { ... }' }
|
67 | output: function (styles, styleNodes) {
|
68 | writeFileSync('bundle.css', styles)
|
69 | },
|
70 |
|
71 | // Disable any style output or callbacks, import as string
|
72 | output: false,
|
73 |
|
74 | // Determine if node process should be terminated on error (default: false)
|
75 | failOnError: true,
|
76 |
|
77 | // Prefix global scss. Useful for variables and mixins.
|
78 | prefix: `@import "./fonts.scss";`,
|
79 |
|
80 | // Use a node-sass compatible compiler (default: node-sass)
|
81 | sass: require('sass'),
|
82 |
|
83 | // Run postcss processor before output
|
84 | processor: css => postcss([autoprefixer({ overrideBrowserslist: "Edge 18" })])
|
85 |
|
86 | // Process resulting CSS
|
87 | processor: css => css.replace('/*date*/', '/* ' + new Date().toJSON() + ' */')
|
88 |
|
89 | // Add file/folder to be monitored in watch mode so that changes to these files will trigger rebuilds.
|
90 | // Do not choose a directory where rollup output or dest is pointed to as this will cause an infinite loop
|
91 | watch: 'src/styles/components',
|
92 | watch: ['src/styles/components', 'src/multiple/folders'],
|
93 | })
|
94 | ```
|
95 |
|
96 | ## Changelog
|
97 |
|
98 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
|
99 |
|
100 | ## Contributing
|
101 |
|
102 | Contributions and feedback are very welcome.
|
103 |
|
104 | To get it running:
|
105 | 1. Clone the project.
|
106 | 2. `npm install`
|
107 |
|
108 | ## Credits
|
109 |
|
110 | - [Thomas Ghysels](https://github.com/thgh)
|
111 | - [All Contributors][link-contributors]
|
112 |
|
113 | ## License
|
114 |
|
115 | The MIT License (MIT). Please see [License File](LICENSE) for more information.
|
116 |
|
117 | [link-author]: https://github.com/thgh
|
118 | [link-contributors]: ../../contributors
|
119 | [rollup-plugin-vue]: https://www.npmjs.com/package/rollup-plugin-vue
|
120 | [rollup-plugin-buble]: https://www.npmjs.com/package/rollup-plugin-buble
|
121 | [rollup-plugin-babel]: https://www.npmjs.com/package/rollup-plugin-babel
|
122 | [node-sass]: https://www.npmjs.com/package/node-sass
|
123 | [sass]: https://www.npmjs.com/package/sass
|