In anticipation of a Sassier Bootstrap 4, I'm (trying to) switch from Less to Sass on Bootstrap 3.3.5 and setting up the required Gruntfile.js
file. I had no problem compiling Less but cannot get Grunt working with Sass, specifically, $ grunt
and $ grunt watch
both get me
Running "watch" task
Waiting...
forever.
Needless to say it does not compile. I tried $ grunt watch --verbose
and got a lot of green OK
s.
I presume I have some error or inefficiency in my gruntfile.js
but since this is Baby's First Gruntfile.js, I'm stuck from here. Can you see what's causing this?
/*** Created by morgan on 9/13/15. */
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
includePaths: ['static/sass']
},
dev: {
options: {
style: 'expanded',
compass: false
},
files: {
'css/styles.css': 'sass/styles.scss'
}
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: [
'sass/**/*.scss'
],
tasks: ['sass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', 'watch')
};
My project directory, if that's helpful:
(Django project)
app
├── static
│ ├── sass
│ │ ├── _bootstrap.scss
│ │ └── styles.scss
│ ├── css
│ │ └── styles.css
│ └── jquery
├── node_modules
│ ├── grunt
│ ├── grunt-contrib-sass
│ └── grunt-contrib-watch
├── Gruntfile.js
└── package.json
@maxbeatty provided an executable Gruntfile.js and package.json in Slack #help. on GitHub here: https://github.com/maxbeatty/example-grunt-sass-bootstrap
Note if you're using this template for your own sass-bootstrap project, you'll probably need to change the files:
path to match your own.
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dev: {
options: {
outputStyle: 'expanded'
},
files: {
'static/css/styles.css': 'static/sass/styles.scss'
}
}
},
watch: {
sass: {
files: [
'static/sass/**/*.scss'
],
tasks: ['sass:dev']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', 'watch')
};
package.json dependencies:
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-watch": "^0.6.1",
"grunt-sass": "^1.0.0"
}
Again, both from @maxbeatty. (Directory unchanged). The watch
troubleshooting is archived in the Slack channel for further reading.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With