Skip to content

Compiling SCSS to CSS

CSS/

I recently had to convert a design template into a static one-page website using HTML, CSS and a bit of JavaScript. When it comes to styling, I always use Sass with SCSS syntax, and this project was no different.

Without a framework, there are multiple ways how to compile SCSS to CSS in your proejct:

  1. Using command line tools
  2. Using Webpack
  3. Using Parcel

In this post you will learn how to style your projects with SCSS that don’t use a framework like React.

Compiling SCSS Using Command Line

To compile SCSS to CSS from your command line, you will first need to download the sass executable. There are two options you can choose from:

Installing Dart Sass

To install Dart Sass follow these steps:

  1. Go to Dart Sass GitHub repository and find the newest version at the top (Dart Sass 1.56.1 at the time of writing)

  2. Find and download the right archive for your operating system under Assets

  3. Unpack the downloaded archive

    cd ~/Downloads
tar -xf dart-sass-1.56.1-linux-x64.tar.gz

  4. Add the sass executable to your PATH

    In my case, I keep my executable scripts inside .local/bin in my home directory.

    mv dart-sass/sass ~/.local/bin/sass

    Check out this how-to explanation to adding folders to your PATH.

Installing Sass from NPM

Alternatively, you can install the JavaScript implementation by simply running

npm install -g sass

It’s a lot less work, but remember this version runs slower. If you need speed, install Dart Sass instead.

Using Sass

You can verify that Sass has been installed by checking its version.

sass --version

If the command returns a version number, you’re set to go.

Compile SCSS to CSS by running the sass command from your terminal.

sass input.scss output.css

If your source file is inside a folder or you want to place the output inside one, you can pass paths to sass:

sass sourceDir/styles.scss outputDir/styles.css

If you have split your SCSS styles into modules, the compiler will bundle them together as long as you import them in the source file.

src/
├─ styles/
│  ├─ _reset.scss
│  ├─ _color.scss
│  ├─ styles.scss

Import them in the source file that you are going to compile:

@use 'reset';
@use 'color' as color;

button {
  background-color: color.$primary;
}

The output CSS file will contain the styles you see and the contents of _reset.scss.

You can compile all files from a source directory if you have multiple input SCSS files.

sass sourceDir:targetDir

This will compile all SCSS files inside sourceDir and output the corresponding CSS files inside targetDir folder.

While working on your project, pass the --watch flag to automatically compile any changes you make in the source file or files that it imports.

sass --watch src/styles.scss dist/styles.css

It also works for entire directories:

sass --watch src:dist

Lastly, don’t forget to include the compiled CSS in your HTML.

<link rel="stylesheet" href="./outputDir/styles.css" />

Compiling SCSS Using Webpack

Webpack is a tool for bundling multiple JavaScript files together, but it can also transform SCSS to CSS.

Since Webpack works with JavaScript modules, you will need to create a .js file and import your .scss file there.

import './styles/styles.scss';

After that, add Webpack to your project.

npm i --save-dev webpack webpack-cli

Now, install the following packages that Webpack uses to compile SCSS to CSS.

npm i --save-dev css-loader mini-css-extract-plugin sass sass-loader

Here’s what these packages do:

  • sass and sass-loader — take care of compiling SCSS to CSS
  • css-loader — loads the CSS styles into JavaScript
  • mini-css-extract-plugin — extracts the styles from JavaScript into a CSS file

Now, create a config file called webpack.config.js in the root of your project an

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};
  • entry is the location of the JavaScript file that imports your .scss file
  • output is where you want the final .css file to be placed

Webpack outputs bundled JavaScript inside output.filename file. The compiled CSS will be placed next to in its own file with the same name (main.css in this case).

Because loaders are executed in reverse order, sass-loader is the last.

If you want to compile both .scss and .sass files, adjust the test regex to /\.s[ac]ss$/i. The [ac] part will match both file extensions.

Finally, add the following scripts to your package.json to run Webpack.

{
  "scripts": {
    "dev": "webpack --watch --mode development",
    "build": "webpack --mode production"
  }
}

While developing, use the run npm run dev. The --watch flag will continuously compile SCSS when you update your styles.

By default, Webpack uses webpack.config.js file. To use another file, pass it in --config argument.

{
  "scripts": {
    "dev": "webpack --watch --mode development",
    "build": "webpack --config config-dir/production.config.js --mode production"
  }
}

Compiling SCSS with Parcel

Parcel is a web project bundler, similar to Webpack in a way, but with a lot more configuration out of box. You don’t need to configure your project to compile SCSS to CSS, Parcel will do it for you.

First of all, you need to update your index.html file to import your source .scss file.

<link rel="stylesheet" href="./src/styles/styles.scss" />

Link SCSS right inside HTML? Yes, Parcel will do its magic and output a bundled HTML file that will import the compiled CSS.

Next, install Parcel with its Sass transformer:

npm install --save-dev parcel @parcel/transformer-sass

Now, add the following scripts to your package.json.

"scripts": {
  "dev": "parcel watch index.html",
  "build": "parcel build index.html"
}

While developing, use run npm run dev and Parcel will automatically compile SCSS to CSS when you make changes.

Parcel uses absolute URLs so your styles won’t work if you open the HTML file locally in your browser. Pass the --public-url argument a relative path (.) if you want to preview your HTML without a server.

"scripts": {
  "dev": "parcel watch --public-url . index.html",
  "build": "parcel build --public-url . index.html"
}

You can preview the bundled result in dist/index.html file.

Summary

In this post you learned 3 ways of compiling SCSS to CSS without a framework:

  • Using command line interface
  • Using Webpack
  • Using Parcel

Use these options when building basic web sites that don’t need complicated and interactive user interfaces.