Skip to content

Commit 029147e

Browse files
authored
Simplify rollup configuration in documentation (#354)
* Simplify rollup configuration in documentation * Add info about CSS bundling * Fix typo
1 parent 8832861 commit 029147e

File tree

1 file changed

+42
-12
lines changed

1 file changed

+42
-12
lines changed

docs/using-rollup.md

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,59 @@ Follow the [installation](https://github.com/DevExpress/devextreme-angular#insta
1010

1111
## <a name="configuration"></a>Configure Rollup for DevExtreme ##
1212

13-
There is [a limitation](https://github.com/DevExpress/devextreme-angular/issues/283) in bundling with Rollup.
13+
There is [a limitation](https://github.com/DevExpress/devextreme-angular/issues/353) in bundling with Rollup.
1414
Make sure that you use [long paths](https://github.com/DevExpress/devextreme-angular/#bundlers-without-tree-shaking-support) for DevExtreme Angular modules.
1515

1616
Ensure that the following plugins are included:
1717

1818
```js
19-
var nodeResolve = require('rollup-plugin-node-resolve');
20-
var commonjs = require('rollup-plugin-commonjs');
21-
var builtins = require('rollup-plugin-node-builtins');
22-
var globals = require('rollup-plugin-node-globals');
19+
import nodeResolve from 'rollup-plugin-node-resolve';
20+
import commonjs from 'rollup-plugin-commonjs';
21+
import alias from 'rollup-plugin-alias';
2322

24-
{
25-
....
23+
...
24+
25+
export default {
26+
...
2627
plugins: [
27-
nodeResolve({ jsnext: true, main: true, browser: true, preferBuiltins: true }),
28-
commonjs(),
29-
builtins(),
30-
globals()
28+
alias({
29+
jszip: path.join(__dirname, './node_modules/jszip/dist/jszip.min.js')
30+
}),
31+
nodeResolve({ jsnext: true, module: true }),
32+
commonjs()
3133
]
3234
...
3335
}
3436
```
3537

3638
## Import DevExtreme Stylesheets ##
3739

38-
Import the required [DevExtreme css files](https://js.devexpress.com/Documentation/Guide/Themes/Predefined_Themes/).
40+
Import the required [DevExtreme css files](https://js.devexpress.com/Documentation/Guide/Themes/Predefined_Themes/).
41+
42+
43+
In order to create a single CSS bundle, you can use the `rollup-plugin-css-only` package. Import DevExtreme CSS files prior to widget modules as follows:
44+
45+
```js
46+
import 'devextreme/dist/css/dx.common.css';
47+
import 'devextreme/dist/css/dx.light.css';
48+
49+
...
50+
```
51+
52+
Ensure that the following plugin is included:
53+
54+
```js
55+
import css from 'rollup-plugin-css-only';
56+
57+
...
58+
59+
export default {
60+
...
61+
plugins: [
62+
css({ output: 'dist/bundle.css' }),
63+
64+
...
65+
]
66+
...
67+
}
68+
```

0 commit comments

Comments
 (0)