I would like to have grunt compile a compact and a compressed version of my sass. I can get it to compile one or the other but not both at the same time. I have tried:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'style.min.css': 'css/main.scss',
}
}
},
sass: {
dist: {
options: {
style: 'compact'
},
files: {
'style.css': 'css/main.scss',
}
}
}
and also:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'style.min.css': 'css/main.scss',
}
},
dist: {
options: {
style: 'compact'
},
files: {
'style.css': 'css/main.scss',
}
}
}
But neither has worked. What's the solution?
Take a look at the approach I take in my projects, I could be dead wrong about it but I have similar intention as to create one file for readability and other for minification purposes.
sass: {
appStyles: {options: {style: 'expanded', sourcemap: 'none'}, files: {'styles/app.css': 'styles/app/main.scss'}},
appStylesMinified: {options: {style: 'compressed', sourcemap: 'none'}, files: {'styles/app.min.css': 'styles/app.css'}}
}
Notice that the style
that I have chosen for both appStyles
and appStylesMinified
are expanded
and compressed
respectively. Also, the compressed
version takes the newly created app.css
file instead of main.scss
to further create app.min.css
.
I find this app.css
a little useful in debugging as well when I am still in development mode. But of course, when everything is production ready, app.min.css
takes it from there.