Permalink
0bb1b2b Jul 9, 2018
1 contributor

Users who have contributed to this file

42 lines (29 sloc) 1.55 KB

Using the DevExtreme Vue Integration with Webpack

Create a new Application

You can use the original Vue template on Webpack or some other starter to create a new project based on Webpack.

Add DevExtreme

Follow the installation section in our Readme.

Configure Webpack Loaders for DevExtreme Stylesheets

If you are using the original Vue template on Webpack you don't need any extra configuration, since all the required loaders are configured out-of-the-box. Otherwise, you need to make sure that all the necessary extensions are processed by the corresponding loaders as described below.

Go to webpack.config.js and configure loaders for css and fonts as follows:

...
  loaders: [
    ...
    { test: /\.css$/, loader: "style-loader!css-loader" },
    { test: /\.(ttf|eot|woff)$/, loader: "file-loader?name=/[name].[ext]" }
  ]
...

Also, make sure that style-loader, css-loader and file-loader are installed into your project as npm dev dependencies.

Import DevExtreme Stylesheets

Having loaders configured, you need to import the required DevExtreme css files. Go to your main .js file and import the stylesheets as follows:

...
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';