Using NPM to compile SCSS files

You can use JS Node to compile a SASS file (.SCSS) to a CSS file. To compile a SASS file into CSS using NPM, you need to first install this on your system by using this command.

npm install -g scss-compile

NOTE - make sure you have NODE JS on your system.

Once successful, you will see:

Now you are ready to use a command line to compile a SCSS file into a CSS file. Assume we have this HTML in a directory named SampleProject.

HTML File
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

SCSS file
Under the SampleProject folder, we have a folder named css. In this folder , there is a file named style.scss, as shown here:

The following code represents the style.scss file.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Compile the SCSS into a CSS
To compile this SCSS into a CSS file using NPM, you need to create a file named package.json in the SampleProject folder. This package defines the command we need to convert this file. Here is the code for this JSON file.

{
"devDependencies": {
"node-sass": "^6.4.1"
},

"scripts": {
"scss-compile": "node-sass -o css css/style.scss"
}
}

Now open the command line to the SampleProject folder and enter this command:

npm run scss-compile

If successful, you will see this message in the command prompt.

There you go, now you have successfully converted the SCSS into a CSS file.

AEM Tutorials for Beginners

April 14, 2020
Estimated Post Reading Time ~