0

I want to convert all my scss files(located in sass/ folder) to css files(located in css/ folder) automatically on save. And I want it to work even with the new ones. For example, I had index-style.scss and header-style.scss, already converted to css, but if I create another scss file, like footer-style.scss, I want it to convert to css AUTOMATICALLY, without editing Gruntfile or something.

scss and css files will always match

I tried:

files: {
       'src/main/webapp/WEB-INF/css/' : 'src/main/webapp/WEB-INF/sass/'
}

there were no compiling errors, but it didn't convert scss file. Also tried :

files: {
       'src/main/webapp/WEB-INF/css/*.css' : 'src/main/webapp/WEB-INF/sass/*.scss'
}

Is this even possible?

P.S.

I also tried adding this code to the Gruntfile.js:

let cssDir = "src/main/webapp/WEB-INF/css/";
let sassDir = "src/main/webapp/WEB-INF/sass/";
let filesObj = {}
// filesObj[cssDir+"login-page.css"] = sassDir+"login-page.scss"
let fs = require('fs')
fs.readdir(sassDir, function (err, files) {
    if (err) {
     console.log("could not list the dir" + err);
     process.exit(1);
    }
    files.forEach(function (file, index) {
        console.log("forEach is working!")
        let cssPath = cssDir+file;
        fs.access(cssPath,(err) => {
            console.log("fs.access is working")
            if (err) {
                fs.appendFile(cssPath, '', function (err) {
                    console.log("appendFile is working")
                    if (err) {
                        console.log("Grunt file 17 line error");
                        process.exit(1);
                    }
                })
            }
        })
        console.log("\n\n==========================================\n\n"+cssPath+"\n\n"+sassDir+'file\n')
        filesObj[cssDir+'file'] = sassDir+'file'
    })
})


...
sass: {
            dist: {
                options: {
                    sourcemap: false,
                    compress: false,
                    yuicompress: false,
                    style: 'expanded',
                },
                files: filesObj
            },
        }
...

but, it didn't help

0 Answers0