DEV Community

joachim kliemann
joachim kliemann

Posted on

5 1

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
Enter fullscreen mode Exit fullscreen mode

Install the necessary dependencies:

npm install rollup rollup-plugin-sass rollup-plugin-terser --save-dev
Enter fullscreen mode Exit fullscreen mode

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
    ]
};
Enter fullscreen mode Exit fullscreen mode

Setting up the SASS

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

mkdir src
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Setting up the JavaScript

Create an index.js file inside the src directory:

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

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Building the Project

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

npx rollup -c
Enter fullscreen mode Exit fullscreen mode

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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (1)

Collapse
 
carry0987 profile image
carry0987

Can this plugin minify CSS ?

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay