cssscss-lint

How to edit css through scss files


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


Solution

  • 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