Webpack

Install the package:
npm install [email protected] --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.
Last modified 3yr ago