Integration
There is a lot of different ways to compile your scss into your project. Here's a little step-by-step guide using some of the most popular ways to do it.
Dart Sass
Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows 1open in new window
- Install the template of your choice using:
cs-cli - Add an package.json file in your app with
npm init -y - Install sass as a dev-depedencie
npm i sass --save-dev - Add a script inside your package.json to compile you scss on save.
- Use
npm run watchin your terminal to run the script
//package.json
"scripts": {
"watch": "sass scss/main.scss css/style.css --watch"
}
Learn more about dart sassopen in new window
Learn more about npm scriptsopen in new window
Vite.js
Vite is a great frontend tool, fast, and easy to configure. If you are using Vite to scaffold your project, you know that there is a multitude of templateopen in new window available. The setup is the same for all of them.
- Install the template of your choice using:
cs-cli - Install vite and scaffold your project with
npm init vite@latest - Import your scss inside the
main.jsfile of your app - Use
npm run devto run vite
//main.js
import './scss/main.scss'
Learn more about viteopen in new window
Gulp
Gulp is another popular tool to automate and enhance your workflow. With Gulp, you will need to install some dependencies and configure gulpfile.js.
- Install the template of your choice using:
cs-cli - Install gulp
npm install --global gulp-cli - Install sass & gulp-sass
npm i sass gulp-sass --save-dev - Create a
gulpfile.jsand add the follow config - Use
gulp sassto compile your scss
// /gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')((require('sass));
gulp.task('sass', function(){
return gulp.src('./scss/main.scss') //source
.pipe(sass()) //using gulp-sass
.pipe(gulp.dest('./css')) //destination
})
Learn more about gulpopen in new window
Parcel
With Parcel, you do not need a configuration file in your project, simply link your main.scss to an index.html.
- Install the template of your choice using:
cs-cli - Install parcel
npm install parcel-bundler --save-dev - Install sass
npm i sass --save-dev - Add an index.html file and link your main.scss to it
- Add the following scripts inside your package.json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>createscss.com</title>
<link rel="stylesheet" href="scss/main.scss">
</head>
<body>
</body>
</html>
//package.json
"scripts": {
"dev": "parcel index.html"
}