Currently, we are only bundling up our JavaScript files, but most application developers know that any frontend work also needs to be bundled up. Take Sass (https://sass-lang.com/), for example. It allows us to write CSS in a way that allows maximum reusability.

Let's go ahead and turn the CSS that we had for this project into a Sass file. Follow these steps:

1. Create a new folder called stylesheets and add main.scss to it.
2. Add the following code to our Sass file:

$main-color: "#003A21";
$text-color: "#efefef";
/* header styles */
header {
    // removed for brevity
    background : $main-color;
    color      : $text-color;
    h1 {
        float : left;
    }
    nav {
        float : right;
    }
}
/* Footer styles */
footer {
    // removed for brevity
    h2 {
        float : left;
    }
    a {
        float : right;
    }
}

The previous code showcases two features of Sass that make it easier to use:

• It allows us to nest styling. Instead of having to have a separate footer and h2 section, we can just nest them.
• It allows the use of variables (yes, we have them in CSS).

There is quite a bit more to Sass that what can be found on their website, such as mixins, but here, we want to focus on converting these files into the CSS that we know we can use on the frontend.

Now, we need to convert this into CSS and put it in our original folder. To do that, we will add rollup-plugin-sass to our configuration. We can do that by running npm install -D rollup-plugin-sass. With that added, we will add a new rollup configuration called rollup.sass.config.js and add the following code to it:

import sass from 'rollup-plugin-sass';
module.exports = {
    input: "./main-sass.js",
    output: {
        file: "./template/css/main.css",
        format: "cjs"
    },
    plugins: [
        sass()
    ]
}

Once we have made our rollup file, we will need to create the main-sass.js file that we have currently. Let's go ahead and do just that. Add the following code to that file:

import main_sass from './template/stylesheets/main.scss'
export default main_sass;

Now, let's run the following command:

> rollup --config rollup.sass.config.js 

By doing this, we will see that the css directory inside of our template folder has been populated. By doing this, we can see how we can bundle everything up, not just our JavaScript files. Now that we've integrated Rollup's build system into our development pipeline, we will take a look at integrating Rollup into NPM's build pipeline.