grunt-contrib-sass没有编译css文件
问题描述:
我对grunt很新。我刚刚设置了一个grunt项目,基本上按照这个教程:Setting up Sass with Grunt。我的目录结构稍有不同,但是我已经完成了让我的gruntfile中定义的任务运行 - 至少执行$ grunt --verbose
不会给我任何错误,并且任何时候我都会将其中一个定义为我的源的scss文件更改为watch任务触发。但是,没有生成css文件。grunt-contrib-sass没有编译css文件
我package.json
看起来是这样的:
{
"name": "grunt-test",
"version": "1.0.0",
"description": "bootstrap sass and javascript compilation",
"main": "index.js",
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"author": "Me",
"license": "",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "^0.6.1",
"matchdep": "^0.3.0"
}
}
我GruntFile.js:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
project: {
app: '../app',
assets: '<%= project.app %>/assets',
src: 'bower_components/bootstrap-sass-official/assets',
scss: [
'<%= project.src %>/stylesheets/_bootstrap.scss'
],
js: [
'<%= project.src %>/javascripts/bootstrap.js',
'<%= project.src %>/javascripts/bootstrap/*.js'
]
},
tag: {
banner: '/*!\n' +
' * <%= pkg.name %>\n' +
' * <%= pkg.title %>\n' +
' * <%= pkg.url %>\n' +
' * @author <%= pkg.author %>\n' +
' * @version <%= pkg.version %>\n' +
' * Copyright <%= pkg.copyright %>. <%= pkg.license %> licensed.\n' +
' */\n'
},
sass: {
dev: {
options: {
sourcemap: 'auto',
style: 'expanded',
banner: '<%= tag.banner %>',
compass: false
},
files: {
'<%= project.assets %>/stylesheets/bootstrap.css': '<%= project.scss %>'
}
},
dist: {
options: {
sourcemap: 'auto',
style: 'compressed',
compass: false
},
files: {
'<%= project.assets %>/stylesheets/bootstrap.css': '<%= project.scss %>'
}
}
},
watch: {
sass: {
files: '<%= project.src %>/stylesheets/{,*/}*.{scss,sass}',
tasks: ['sass:dev']
}
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.registerTask('default', [ 'sass:dev', 'watch' ]);
}
人们可以看到我的目录结构略有不同,以在本教程中使用的,由于我如何建立我的项目。编辑目标是外部我的项目目录(../app/assets
)和源在bower_components
之内。来源似乎得到正确识别。但是我的目标定义出了什么问题?我假设编译器将获取project.scss
中定义的内容并将其编译为<%= project.assets %>/stylesheets/bootstrap.css
。
即使grunt --verbose
告诉我,任务已经执行,没有错误,没有任何css文件正在生成。我究竟做错了什么?
高度赞赏任何提示,
斯特凡
答
回答我的问题:我发现失踪in this blogpost细节。在那篇文章中,作者明确提到创建一个style.scss
(可以命名为我猜的任何名称),其中她将包含sass文件(* .scss)的引导目录与@import
链接起来。
这样做。我想这是关于_前缀。当使用@import
时,我的Gruntfile中正在寻址的scss文件不能以下划线开头,对吧? (我没有尝试过不同的变体,因为我想要的只是简单的解决)
我花了大约一个小时才找到这个答案,并立即解决了我的grunt/sass编译器问题。感谢您发布您的答案! – 2016-09-14 11:14:29