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.
Hope this helps.
