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