DEV Community

joachim kliemann
joachim kliemann

Posted on

2

Simplifying SCSS Compilation with Parcel.js

Creating an efficient and manageable workflow is crucial for any front-end developer. One way to improve your workflow is by utilizing SCSS and Parcel.js. SCSS is a preprocessor scripting language that extends CSS, while Parcel.js is a high-speed web application bundler that requires no configuration. This article will guide you through setting up Parcel.js to compile SCSS into CSS, enhancing your web development process.

Understanding SCSS and Parcel.js

SCSS (Sassy CSS):

  • SCSS is an extension of CSS that allows you to use variables, nested rules, mixins, functions, and more, all within your CSS file.
  • It makes your CSS more maintainable, readable, and reusable.

Parcel.js:

  • A web application bundler that offers a simplified setup process.
  • Automatically transforms and bundles your assets without the need for extensive configuration.

Setting Up Your Project

1. Install Node.js:
Ensure Node.js is installed on your system. You can download it from Node.js official website.

2. Initialize Your Project:
Create a new directory for your project and initialize it with npm.

mkdir my-project
cd my-project
npm init -y
Enter fullscreen mode Exit fullscreen mode

3. Install Parcel.js:
Install Parcel.js in your project directory.

npm install --save-dev parcel-bundler
Enter fullscreen mode Exit fullscreen mode

4. Project Structure:
Create a basic project structure. For instance:

  • index.html: Your main HTML file.
  • styles/: Directory for SCSS files.
  • styles/main.scss: Your main SCSS file.

5. Link SCSS to HTML:
In your index.html, link to the SCSS file (Parcel will handle the compilation to CSS).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Project</title>
    <link rel="stylesheet" href="./styles/main.scss">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Writing SCSS

In styles/main.scss, you can start writing your SCSS. For example:

$primary-color: #3498db;

body {
    font-family: 'Arial', sans-serif;
    color: $primary-color;
}
Enter fullscreen mode Exit fullscreen mode

Running Parcel

1. Add a Start Script:
Modify your package.json to include a start script.

"scripts": {
    "start": "parcel index.html"
}
Enter fullscreen mode Exit fullscreen mode

2. Run Your Project:
Start your project using npm.

npm start
Enter fullscreen mode Exit fullscreen mode

Image description

Parcel will automatically compile your SCSS to CSS and open your project in the browser. Any changes you make in your SCSS file will be instantly compiled and updated in the browser.

Conclusion

Using SCSS with Parcel.js simplifies the development process, making it more efficient and manageable. With automatic compilation and a zero-configuration setup, Parcel.js allows you to focus more on writing code and less on configuring your build tools. This setup is ideal for developers looking to streamline their workflow and enhance their web development experience.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay