我想建立一个基本的预处理工作流程。我已经建立了一个这样的目录结构:
- website-root
- - index.html
- - css
- - pre-processing
- - - Gruntfile.js
- - - package.json
- - - sass
- - - - test.scss
我正在使用 Grunt,因为我希望将来有一些高级构建操作。我也在使用 Compass,因为我想使用它的 mixins 等。
我现在要做的只是设置一个监视任务,将“test.scss”编译成网站根目录下的 css 文件夹中的“test.css”文件。但是,无论我尝试什么,当我在控制台中键入“compass watch”然后更改“test.scss”文件的内容时,结果是“test.css”文件总是被编译到一个新文件夹中在“预处理”文件夹中称为“样式表”。
Gruntfile.js 的内容是:
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dev: {
options: {
sassDir: 'scss/',
cssDir: '/css/',
relativeAssets: true
}
}
},
watch: {
sass: {
files: ['scss/{,*/}*.{scss,sass}'],
tasks: ['compass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['compass:dev']);
}
package.json 文件包含以下内容:
{
"name": "Test",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-compass": "^1.0.1"
}
}
所以cssDir
Gruntfile.js 中的选项似乎没有影响。
谁能建议为什么会这样?我是一个完全预处理的新手,所以可能会遗漏一些明显的东西!
谢谢。