DevExtreme Angular Integration

[zenkdev]

Hi. Can you help me with DevExtreme integration into your amazing project? Article https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-webpack.md#import-devextreme-stylesheets describes how to include css in the project, but it does not work for me. I have included css as follows

@Component({ selector: "quick-app", templateUrl: './app.component.html', styleUrls: ['./app.component.css', '../styles.css', '../themes.css', '../../../node_modules/devextreme/dist/css/dx.common.css', '../../../node_modules/devextreme/dist/css/dx.light.css'], encapsulation: ViewEncapsulation.None })

Is it right to do this or is there another way?

Thank you.

[emonney]

I recommend you all all vendor packages to the "webpack.config.vendor.js" file. Open that file, you'll see there're packages (css) already added in there. Add your own like this 'devextreme/dist/css/dx.common.css'. Add any other 3rd party libraries (including js) using this approach too.

[zenkdev]

I added following lines in to the webpack.config.vendor.js file: const sharedConfig = { ..., entry: { vendor: [ ..., './ClientApp/app/styles-external.css', 'Devextreme / dist / css / dx.common.css', 'Devextreme / dist / css / dx.light.css' ] }, ... };

But it turned out that this is not automatically recompiled. After looking at the package.json file, I found the build script "Scripts": { "dev-build": "node node_modules / webpack / bin / webpack.js --config webpack.config.vendor.js" }, I added the following line to the end of the file '{ "name": "quickapp", ... "Scripts": { "dev-build": "node node_modules / webpack / bin / webpack.js --config webpack.config.vendor.js" }, ..., "-vs-binding": {"BeforeBuild": ["dev-build"]} }'

Now vendor script is rebuilds with the project. Perhaps this will seem useful to you and you include this option in your project

[emonney]

Great. Rebuilding the vendor script with each build slows down the build process. The vendor scripts don't change that often hence the design decision not to rebuild it with every build. It is rebuilt automatically in the following cases

1. The dist (in wwwroot) folder doesn't exist (e.g. for new projects or when you manually delete the dist folder)
2. You manually run npm run dev-build command

Hope it helps Cheers.

[zenkdev]

I think you are right, but for beginners, like me, it's not obvious that you need to execute the script after editing the file webpack.config.vendor.js. In this case, it is worth writing about this in the documentation for the project. Thank you for your help.