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