Parcel

Install the package:
npm install [email protected]
Add classy-ui/plugin to your babel configuration:
{
  "plugins": ["classy-ui/plugin"]
}
This plugin does not work with Parcel 1 and Typescript out of the box. You have to install parcel-plugin-babel-typescript. It does work with Parcel 2 and Typescript out of the box
Start using it:
import { compose, tokens } from 'classy-ui';
Production
Parcel will by default output to a dist directory, but Classy-UI defaults to a build directory. You can change the output directory of Classy-UI in the plugin configuration:
{
  "plugins": [["classy-ui/plugin", {"output": "dist"}]]
}
The only thing you need to do is to include this classy-ui.css file in your HTML file. Since Parcel automatically searches for import references in the index.html file you will need to use a script:
<!DOCTYPE html>
<html>
  <head>
    <script>
      if (process.env.PRODUCTION) {
        var link = document.createElement("link");
        link.href = "/classy-ui.css";
        link.rel = "stylesheet";
        document.head.appendChild(link);
      }
    </script>
  </head>
  <body>
    ...
  </body>
</html>
Parcel allows you to set environment variables using dot-env, read the documentation.
Parcel has a history of caching too much. During production build you should turn caching off to ensure a proper output. parcel build --no-cache
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