UNPKG

2.77 kBMarkdownView Raw
1# rollup-plugin-css-porter
2
3A rollup plugin to collect and combine all the imported css file. Such as `import './my.css'`.
4Then output them to a standalone css file. Besides, use [clean-css](https://www.npmjs.com/package/clean-css)
5to create a minified css file as you wish.
6
7## Installation
8
9Use `npm`:
10
11```bash
12npm install --save-dev rollup-plugin-css-porter
13// or
14npm i --D rollup-plugin-css-porter
15```
16
17Use `yarn`:
18
19```bash
20yarn add rollup-plugin-css-porter --dev
21```
22
23## Usage
24
25### Case 1 (default behavior):
26Output to a standalone css file and a minified css file.
27The output destination is the same dir with `bundle.write()` options.dest
28
29```js
30import { rollup } from 'rollup';
31import css from 'rollup-plugin-css-porter';
32
33rollup({
34 entry: 'main.js',
35 plugins: [ css() ]
36}).then(bundle => {
37 bundle.write({
38 format: 'es',
39 dest: 'bundle.js'
40 });
41});
42```
43
44### Case 2:
45Output to a standalone css file without minified css file.
46The output destination is the same dir with `bundle.write()` options.dest
47
48```js
49import { rollup } from 'rollup';
50import css from 'rollup-plugin-css-porter';
51
52rollup({
53 entry: 'main.js',
54 plugins: [ css({minified: false}) ]
55}).then(bundle => {
56 bundle.write({
57 format: 'es',
58 dest: 'bundle.js'
59 });
60});
61```
62
63### Case 3:
64Output to a specific path if config the plugin options.dest
65
66```js
67import { rollup } from 'rollup';
68import css from 'rollup-plugin-css-porter';
69
70rollup({
71 entry: 'main.js',
72 plugins: [ css({dest: 'path-to-my-dir/bundle.css'}) ]
73}).then(bundle => {
74 bundle.write({
75 format: 'es',
76 dest: 'bundle.js'
77 });
78});
79```
80
81### Case 4:
82Output to a standalone css file with only minified css file.
83The output destination is the same dir with `bundle.write()` options.dest
84
85```js
86import { rollup } from 'rollup';
87import css from 'rollup-plugin-css-porter';
88
89rollup({
90 entry: 'main.js',
91 plugins: [ css({raw: false}) ]
92}).then(bundle => {
93 bundle.write({
94 format: 'es',
95 dest: 'bundle.js'
96 });
97});
98```
99
100### Case 5:
101Custom names:
102
103```js
104import { rollup } from 'rollup';
105import css from 'rollup-plugin-css-porter';
106
107rollup({
108 entry: 'main.js',
109 plugins: [ css({
110 raw: 'custom.css',
111 minified: 'custom.min.css',
112 }) ]
113}).then(bundle => {
114 bundle.write({
115 format: 'es',
116 dest: 'bundle.js'
117 });
118});
119```
120
121Or:
122
123```js
124css({
125 raw: 'custom.css',
126 minified: false,
127})
128```
129
130Or:
131
132```js
133css({
134 raw: false,
135 minified: 'custom.min.css',
136})
137```
138
139## Build
140
141Use `npm`:
142
143```bash
144npm run build
145```
146
147Use `yarn`:
148
149```bash
150yarn run build
151```
152
153## Run test
154
155Use `npm`:
156
157```bash
158npm test
159```
160
161Use `yarn`:
162
163```bash
164yarn test
165```