Using NPM for CSS files in a Node project

Question

Usually when I build a webpage, I include some library like bootstrap from CDN. Now I want an offline webpage (in reality I'm using electron.. but same thing) in a Node environment. I chose Pure as my framework.

So I have my Node project with electron installed and now I

npm install purecss --save

which installs purecss into node_modules. It says to use require('yahoocss') to load the files, but how am I supposed to server the build files (pure.min.css) on my HTML pages?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>
    <body>
    </body>
</html>

I mean.. do I put a stylesheet link that points to node_modules? That seems.. wrong.

Vernon Grant · Answer 1 · 2019-02-01T08:00:05.940

You need to use something like Webpack. This will allow you to use static NPM modules like Pure by importing them into a separate JS file that only gets used by Webpack. Webpack reads this file and depending on the module type you are importing, selects the appropriate loader. This loader will perform different types of modifications on the imported files and once completed, will export the outputs to new static files that you can then include in your html document.

Please go and take a look at Webpack's documentation and also see this list of available loaders.

score 0 · Answer 2 · answered Sep 20 '20 at 20:53

I don't believe this is the best answer, but what I want is to be able to keep third-party libraries separate from my code.

(I follow the principle that my CSS/JS is going to change on a schedule different than third-party libraries. Usually my code is going to change more frequently, so that's why I believe it's in my best interest to keep third-party code separate from my CSS, as well as not embedded into the HTML.)

Since I use webpack for compiling and bundling my TypeScript files, I use a plugin to grab a copy of the Pure CSS file and put it into the directory I want.

You'll at least need npm install --save-dev webpack copy-webpack-plugin (in addition to your already performed npm install purecss).

In webpack.config.js you can pull in copy-webpack-plugin (const CopyWebpackPlugin = require('copy-webpack-plugin');) and then in the configuration have it grab a copy of the CSS file(s) you want from the package:

/* ... */
plugins: [
    /* ... */
    new CopyWebpackPlugin({
        patterns: [
            /* ... */
            {
                from: './node_modules/purecss/build/pure-min.css',
                to: 'lib'
            },
            /* ... */
        ]
    })
    /* ... */
],
/* ... */

This will copy that file into a lib directory.

You can then include the file in your HTML file(s):

<link rel="stylesheet" href="./lib/pure-min.css" />

Again, not sure this is the best way, but it's worked well for me when I've wanted to copy a specific file from node_modules into my generated directory.

Using NPM for CSS files in a Node project

2 Answers2