Webpack

Install the package:

npm install classy-ui@beta --save-dev

Configure

There are two different use cases for Webpack:

1. I am using my own Webpack

Install the loaders required:

npm install @babel/core babel-loader --save-dev

Configure your Webpack loaders:

module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
plugins: ['classy-ui/plugin']
}
}
}
],
},
};

If you are using a .babelrc file you can rather add the plugin there

Start using it:

import { compose } from 'classy-ui';

2. I am using a build tool using Webpack

If you have a framework using Webpack under the hood, you will probably only have to add the following to a .babelrc file:

{
"plugins": ["classy-ui/plugin"]
}

Start using it:

import { compose, tokens } from 'classy-ui';

Production

Webpack will by default output to a dist directory, but Classy-UI defaults to a build directory.

  1. You can create the public folder and use CopyWebpackPlugin to copy the contents when building the project

  2. You can change the output of Classy-UI to the output folder of Webpack, which defaults to dist

module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
plugins: [['classy-ui/plugin', { output: 'dist' }]]
}
}
}
],
},
};

If you are using CleanWebpackPlugin you have to make sure that it does not clear the classy-ui.css file.

The only thing you need to do is to include this classy-ui.css file in your HTML file. With Webpack you typically use the HtmlWebpackPlugin:

module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
// Expose a production option to the template
production: process.env.NODE_ENV === 'production'
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
plugins: ['classy-ui/plugin']
}
}
}
],
},
};

The index.html file just needs to add:

<!DOCTYPE html>
<html>
<head>
<% if (htmlWebpackPlugin.options.production){ %>
<link rel="stylesheet" href="/classy-ui.css" />
<% } %>
</head>
<body>
</body>
</html>

Make sure you build webpack with NODE_ENV=production, because Babel does not pick up the --mode production flag of Webpack.

Hashing vs ETAG

Classy-UI does not currently support hashing. The reason being that the Babel plugin is not able to pass information about the name to the build tool. We are exploring this and any feedback is welcome. That means you should ensure that the classy-ui.css file is using ETag.