Grunt:SCSS文件没有编译
问题描述:
我想用grunt编译scss文件。使用论文模块Grunt:SCSS文件没有编译
grunt-contrib-sass
grunt-contrib-watch
grunt-contrib-concat
他这样说,我所有的常规CSS文件被编译成我的主css文件,但没有我的.scss文件一样。我试图在命令行手动编译我的文件,并且它工作正常(sass styles.scss:style.css
),所以它与我的.scss或ruby无关。我究竟做错了什么?
这是我Gruntfile.js看起来像
require('time-grunt')(grunt);
var jsFileList = [
'bower_components/slick-carousel/slick/slick.js',
'sources/js/dom_ready.js'
];
var cssFileList = [
'bower_components/bootstrap/dist/css/bootstrap.css',
'bower_components/slick-carousel/slick/slick.css',
'sources/sass/styles.scss',
'sources/sass/responsive.scss',
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'assets/css/styles.css': cssFileList
}
}
},
concat: {
options: {
separator: ';'
},
dist: {
src: jsFileList,
dest: 'assets/js/script.js'
}
},
watch: {
css: {
files: cssFileList,
tasks: ['sass'],
},
js: {
files: jsFileList,
tasks: ['concat']
}
}
});
grunt.registerTask('default', [
'sass',
'concat'
]);
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
答
我找到了一种方法使用CONCAT做到这一点。
首先要做的就是将你所有的scss和css合并成一个更大的scss文件(我为了方便起见调用concat.scss)。
然后,您可以使用sass任务生成该scss文件。
这就是你的Gruntfile.js应该看。
var jsFileList = [
...
];
var cssFileList = [
...
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
js: {
src: cssFileList,
dest: 'sources/sass/generated/concat.scss'
},
css: {
src: jsFileList,
dest: 'assets/js/script.js'
}
},
sass: {
dist: {
options: {
noCache : true,
style: 'compressed',
sourcemap: "none"
},
files:{
'assets/css/styles.css' : 'sources/sass/generated/concat.scss'
}
}
},
watch: {
css: {
files: cssFileList,
tasks: ['concat','sass']
},
js: {
files: jsFileList,
tasks: ['concat']
}
}
});
grunt.registerTask('default',[
'concat',
'sass'
]);
grunt.registerTask('sass',['concat','sass']);
你的文件结构应该是这样的
/root
/bower_components
...
/assets
/css
styles.css
/js
script.js
/sources
js
...
sass
/generated
concat.scss
/inc
...
/main
...
styles.scss