@financial-times/dotcom-build-css

@financial-times/dotcom-build-css

This package exports a Webpack plugin to configure it with a way to load CSS source files.

Getting started

This package is compatible with Node 18+ and is distributed on npm.

npm install --save-dev @financial-times/dotcom-build-css

After installing the package you must add it to the list of plugins in your project's webpack.config.js configuration file:

+ const { PageKitCssPlugin } = require('@financial-times/dotcom-build-css')

module.exports = {
  plugins: [
+    new PageKitCssPlugin()
  ]
}

Once setup, this plugin will enable you to use CSS files (.css) as entry points into your source code.

const { PageKitCssPlugin } = require('@financial-times/dotcom-build-css')

module.exports = {
   entry: {
      styles: path/to/styles.css
   },
   plugins: [new PageKitCssPlugin()]
}

Scope

This plugin adds a rule to the Webpack configuration to handle .css files. It calls the css-loader package to load and parse the source files. The CSS is optimised using css-minimizer-webpack-plugin, which runs cssnano under the hood. The mini-css-extract-plugin is added to generate .css files and the webpack-fix-style-only-entries to clean up any empty JavaScript bundles.

The CSS loader has url() resolution disabled as we don't use, nor recommend, the function currently.