Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weizhenye/rollup-plugin-bundle-scss
Rollup .scss imports into one bundled .scss file
https://github.com/weizhenye/rollup-plugin-bundle-scss
rollup scss vue
Last synced: about 1 month ago
JSON representation
Rollup .scss imports into one bundled .scss file
- Host: GitHub
- URL: https://github.com/weizhenye/rollup-plugin-bundle-scss
- Owner: weizhenye
- License: mit
- Created: 2019-10-27T11:50:17.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-14T14:34:47.000Z (8 months ago)
- Last Synced: 2024-05-14T11:06:43.700Z (7 months ago)
- Topics: rollup, scss, vue
- Language: JavaScript
- Size: 24.4 KB
- Stars: 16
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - bundle-scss - Bundle all SCSS imports into one SCSS file. (Plugins / CSS)
README
# rollup-plugin-bundle-scss
[](https://github.com/weizhenye/rollup-plugin-bundle-scss/actions?query=workflow%3A%22Node+CI%22)
[](https://nodejs.org)
[](https://www.npmjs.com/package/rollup-plugin-bundle-scss)
[](https://github.com/weizhenye/rollup-plugin-bundle-scss/blob/master/LICENSE)
Rollup .scss imports into one bundled .scss file. Supports .vue files.
Maybe you're writing an UI library with SCSS for styles, and you want to bundle all styles in components into one .scss file, so that users can import it and do some custom theming. That's it.
It dependence on [scss-bundle](https://github.com/reactway/scss-bundle).
## Installation
```bash
npm install -D rollup-plugin-bundle-scss
```
## Usage
```js
import bundleScss from 'rollup-plugin-bundle-scss';
export default {
input: 'src/index.js',
output: {
file: 'dist/index.js',
format: 'esm',
},
plugins: [
// output to dist/index.scss
bundleScss(),
// output to dist/foo.scss
// bundleScss({ output: 'foo.scss' }),
],
};
```
Using with Vue 2 by [rollup-plugin-vue@5](https://github.com/vuejs/rollup-plugin-vue):
```js
import bundleScss from 'rollup-plugin-bundle-scss';
import commonjs from 'rollup-plugin-commonjs';
import vue from 'rollup-plugin-vue';
export default {
input: 'src/App.vue',
output: {
file: 'dist/index.js',
format: 'esm',
},
plugins: [
// required by rollup-plugin-vue
commonjs(),
// put it before vue()
bundleScss(),
vue(),
],
};
```
Using with Vue 3 by [rollup-plugin-vue@6](https://github.com/vuejs/rollup-plugin-vue):
```js
import bundleScss from 'rollup-plugin-bundle-scss';
import vue from 'rollup-plugin-vue';
export default {
input: 'src/App.vue',
output: {
file: 'dist/index.js',
format: 'esm',
},
plugins: [
vue(),
// put it after vue()
bundleScss(),
],
};
```
Using with [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss):
```js
import bundleScss from 'rollup-plugin-bundle-scss';
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.js',
output: {
file: 'dist/index.js',
format: 'esm',
},
plugins: [
// put it before postcss(), and set exclusive to false
bundleScss({ exclusive: false }),
postcss({
// ...
}),
],
};
```
## API
```js
bundleScss({
// where to output bundled SCSS file
output: String,
// Whether SCSS file is exclusive to rollup-plugin-bundle-scss.
// Defalut value: true
// Set it to false when there're other plugin to handle SCSS file after bundleScss()
exclusive: Boolean,
// bundlerOptions will be passed into `scss-bundle` package,
// see document here https://github.com/reactway/scss-bundle
bundlerOptions: {
// If tilde import is used, `project` is required for finding `node_modules`
project: String,
dedupeGlobs: String[],
includePaths: String[],
ignoreImports: String[],
},
})
```