CSS Resource Plugin

Description

This program is designed to make it easy to import a css library from an npm package.

Usage

Note

The CSSResource plugin generates CSS, Therefor it must be chained prior to the CSSPlugin to be used.

Setup

Import from FuseBox

const {CSSResourcePlugin} = require("fuse-box");

Inject into a chain.

fuse.plugin(
     [CSSResourcePlugin(), CSSPlugin()]
)

Or add it to the main config plugins list to make it available across bundles.

FuseBox.init({
    plugins : [
         [CSSResourcePlugin(), CSSPlugin()]
    ]
});

Let's try to make the jstree library work

import "jstree/dist/jstree.js";
import "jstree/dist/themes/default/style.css";

style.css has relative resources (images, fonts), which need to be copied in order to use it. CSSResourcePlugin solves this problem. It re-writes the URL and copies files to a destination specified by user.

Options

dist

Sets the location of the folder where the assets will be written to. For Eample:

plugins: [
   ["node_modules.**css",
      CSSResourcePlugin({
          dist: "build/resources"
      }), CSSPlugin()]
]

The above ill write your assets (images,fonts) to folder myProject/build/resources.

resolve

Allows rewriting the path of files to be served in the browser. For example:

plugins: [
   ["node_modules.**css",
      CSSResourcePlugin({
          dist: "build/resources",
          resolve: (f) => `/resources/${f}`
      }), CSSPlugin()]
]

In the above, resolve in our case is the actual path on browser. f is a modified file name (you don't need to change it).

Inline

You can inline images as well, converting them to base64 data images inside the CSS

plugins: [
   [/node_modules.*\.css$/,
    fsbx.CSSResourcePlugin({
      inline: true,
    }), fsbx.CSSPlugin()],
]

Note

disable cache while playing with the options, as npm modules along with css files are heavily cached.

Macros

If you have problems resolving the paths, you can define macros:

CSSResourcePlugin({
    resolve: file => `/css-resources/${file}`,
    macros: {static: `${__dirname}/src/static/`},
    dist: `${__dirname}/dist/css-resources/`,
})

And use it in your css like so:

body {
    background: url("$static/logo.png");
}