Using gulp V4.x.x to compile scss files (sass format) automatically and create the corresponding packed and minified css file

Note That: by this tutorial, you'll be able to make a config for scss file to be parsed to css files with Gulp

And this tutorial is goog for the ones who want to use scss usages in React Apps created by create-react-app command.

Install the needed Modules by

npm install --dev gulp gulp-cli
npm install gulp-sass gulp-clean-css gulp-uglify gulp-rename gulp-changed

yarn add --dev gulp gulp-cli
yarn add gulp-sass gulp-clean-css gulp-uglify gulp-rename gulp-changed

Add this file to the root directory of your project: gulpfile.js

NOTE THAT

With this configuration, you give two paths.

One for SCSS Src File Path

And the other for CSS File Destination Path

In default the src/dest is look alike below:

var SCSS_SRC = './src/assets/scss/**/*.scss';
var SCSS_DEST = './src/assets/css';

Change the path, where you intend.

Now, every thing is prepared to use the gulp command.

Open Terminal (or cmd), go to gulpfile.js path and type and enter the command below:

gulp

The scss file that is going to be watched for compiling should be named default.scss

Or you can change its config in gulpfile.js

• ALireza Kavian

This project is licensed under the MIT License - see the LICENSE file for details