Trying to create one css file for one sass file (and also using multiple sass files in one css file) with Grunt
I have a project that uses the default setting of using multiple sass files and partial files that are compiled into one global css file.
Now I need the functionality to also have single sass files for single css files (these are components / widgets).
So, in my final markup, the widget will have something like:
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/widgets/widget-name.css"/>
I've tried several options in my grunt file. The current setup looks like this:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
"Webcontent/css/site.css": "WebContent/source/sass/site.scss"
}
}
},
watch: {
src: {
files: ['WebContent/source/sass/*.scss'],
tasks: ['sass'],
}
}
I've tried the following:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
"Webcontent/css/site.css": "WebContent/source/sass/site.scss",
"Webcontent/css/widgets/*.css": "WebContent/source/sass/widgets/*.scss",
}
}
},
As well as:
sass: {
dist: {
options: {
style: 'compressed'
},
files: [
{src: 'WebContent/source/sass/site.scss', dest: 'Webcontent/css/site.css'},
{src: 'WebContent/source/sass/widgets/*.scss', dest: 'Webcontent/css/widgets/*.css' },
],
}
},
watch: {
src: {
files: ['WebContent/source/sass/*.scss', 'WebContent/source/sass/widgets/*.scss'],
tasks: ['sass'],
}
}
I keep getting the error: Warning: Warning: Unable to write "Webcontent/css/widgets/*.css" file (Error code: ENOENT
).
Surely I don't need to specify the target css file?
Any help is greatly appreciated.
source to share
Based on your first solution and http://ryanchristiani.com/getting-started-with-grunt-and-sass/ , your "watched" files should more likely look like this:
(not sure if it really matters, but better try)
watch: {
src: {
files: 'WebContent/source/sass/*.scss',
tasks: ['sass'],
}
}
Otherwise it is usually easier to create your Gruntfile.js like this:
(only main.scss is compiled and all other files @import
into this main.scss)
watch: {
sass: {
files: './assets/css/sass/*.scss',
tasks: ['sass', 'cssmin']
}
},
sass: require( './assets/custom_modules/sass.js' ).task,
cssmin: require( './assets/custom_modules/cssmin.js' ).task
Then in sass.js
exports.task = {
dist: {
options: {
style: 'expanded',
lineNumbers: true,
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'assets/css/sass/',
src: [ 'main.scss' ],
dest: 'assets/css/',
ext: '.css'
}]
}
};
Hope this can help.
Good luck '
source to share