Setting Up a Modern Frontend Build Process with Rollup for SASS and JavaScript

Rollup is a strong module bundler that is great at tree shaking and making efficient code. I will show you how to use Rollup to bundle SASS and JavaScript in a frontend build process.

Prerequisites

You must install Node.js and npm on your computer.

Getting Started

Initialize a new project:

mkdir rollup-sass-js-setup
cd rollup-sass-js-setup
npm init -y

Install the necessary dependencies:

npm install rollup rollup-plugin-sass rollup-plugin-terser --save-dev

Setting up the Rollup Configuration

Create a rollup.config.js file in the root of your project and set up the configuration:

import sass from 'rollup-plugin-sass';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife', // Suitable for <script> tags in browsers
    },
    plugins: [
        sass({ output: 'dist/styles.css' }), // Output CSS to a file
        terser() // Minify JavaScript
    ]
};

Setting up the SASS

Let's create a simple SASS file. First, create a src directory:

mkdir src

Next, create a styles.scss file inside the src directory:

// src/styles.scss
$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

Setting up the JavaScript

Create an index.js file inside the src directory:

// src/index.js
import './styles.scss';

console.log('Hello, Rollup!');

Setting up the HTML

Create an index.html file in the root of your project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rollup SASS/JS Setup</title>
    <link rel="stylesheet" href="dist/styles.css">
</head>
<body>
    <script src="dist/bundle.js"></script>
</body>
</html>

Building the Project

Now that everything is set up, you can run Rollup to bundle your JavaScript and compile your SASS:

npx rollup -c

This will generate a bundle.js and styles.css in the dist directory.

Conclusion

Setting up a modern frontend build process with Rollup is straightforward. You can easily bundle your JavaScript and compile your SASS with a few settings. This setup ensures that you have a lean and optimized codebase, ready for deployment. As your project grows, you can add more tools and preprocessors using Rollup's plugin system.

Blog