如何通过scss文件编辑css

Question

Actually for a recent project i downloaded a theme (Admin Panel). It mostly contains css in parts in the form of .scss files . I tried editing files directly from style.css but nothing seems to change . so i did little bit of research and found that scss files need to compiled again . I don't know how to compile .scss files. On their github page i found that it can be changed with the help of following commands

gulp serve

I don't know the above command was to compile again scss into css but it didn't work So ,kindly help with this or just a provide a link to the tutorial from where i could learn this

Here's the link for the project that i have just downloaded https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template

Thanks in Advance

Answer 1

Setting up a SCSS compiler for a project where you don't use SCSS yourself is tedious. Instead, try compiling it quickly and edit the CSS files after you compiled it.

You can use free compilers online, for example https://www.cssportal.com/scss-to-css/ .

If you would like to start a project with SCSS where you compile it, you can indeed use the GULP setup provided by Bootstrap.

https://mdbootstrap.com/bootstrap-gulp-tutorial/

You can also easily setup Gulp yourself:

https://codehangar.io/gulp-sass/

The above URL explains the following a little more extensive:

npm install gulp-sass --save-dev

Structure :

-index.html
--assets
---styles
----sass
-----index.scss
----css

The 'styles' Task

//gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
    cssDest = 'assets/styles/css/';

gulp.task('styles', function(){
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

Watcher

gulp.task('watch',function() {
    gulp.watch(sassFiles,['styles']);
});

gulp watch