当我使用grunt compass
时,出现以下错误:
“必须从项目目录编译单个样式表。”
我尝试了三种不同的grunt方法。详情见下文。
我的文件夹结构:
test \
Gruntfile.js
package.json
\ node_modules \
\ _src \ (this is the root folder of my Jekyll site)
\ config.rb
\ index.html
\ static/
\ _sass \
\ css \
\ images \
\ js \
适用情况:
在不使用grunt
且使用/_src/config.rb
的情况下,一切都可以正常运行:
#project_path = "_src/"
http_path = "/"
css_dir = "css"
css_path = "static/" + css_dir
sass_dir = "_sass"
sass_path = "static/" + sass_dir
images_dir = "images"
images_path = "static/" + images_dir
output_style = :expanded
relative_assets = true
line_comments = false
因此,在
/src
中,使用compass watch
编译没有问题。
不起作用的内容
无论如何,我决定放弃所有GUI应用程序,并使用grunt
。问题也随之而来。
我也已经更新:
$ grunt --version
>> grunt-cli v0.1.13
$ npm -v
>> 1.4.3
$ node -v
>> v0.10.26
第一次尝试
我尝试的第一件事是尝试使用现有的 config.rb
:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Config
watch: {
compass: {
files: ['**/*.{scss,sass}'],
tasks: ['compass:dev']
},
js: {
// PLACEHOLDER HERE
}
},
compass: {
dev: {
// dev options
// ↓↓↓ HERE'S THE COMPASS CONFIG FILE ↓↓↓
options: { config: '_src/config.rb' }
},
prod: {
// prod options
},
},
jshint: {
options: { jshintrc: '.jshintrc' },
all: ['Gruntfile.js', '_src/static/js/*.js']
},
browserSync: {
files: {
src : [
'_src/static/css/*.css',
'_src/static/images/*',
'_src/static/js/*.js',
'_src/**/*.html'
],
},
options: {
watchTask: true
}
}
});
// Load the Grunt plugins.
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-browser-sync');
// Register the default tasks.
grunt.registerTask('default', ['compass:dev', 'browserSync', 'watch']);
grunt.registerTask('prod', ['compass:prod']);
};
从/test
目录下运行grunt
没有出现错误,它甚至能够识别文件更改,但无法编译我的sass。没有生成任何css文件。
我尝试了grunt compass watch --verbose
,但它中止了:
Running "compass:prod" (compass) task
Verifying property compass.prod exists in config...OK
File: [no files]
Options: cssDir=["_src/static/css"], sassDir=["_src/static/_sass"], imagesDir=["_src/static/images"], javascriptsDir=["_src/static/js"], fontsDir=["_src/static/fonts"], outputStyle="compressed", relativeAssets="true", noLineComments="true"
Options: cssDir=["_src/static/css"], sassDir=["_src/static/_sass"], imagesDir=["_src/static/images"], javascriptsDir=["_src/static/js"], fontsDir=["_src/static/fonts"], outputStyle="compressed", relativeAssets="true", noLineComments="true", time
You must compile individual stylesheets from the project directory.
Warning: ↑ Use --force to continue.
Aborted due to warnings.
……我完全不理解。
第二次尝试 - 首选尝试
既然我不喜欢将config.rb
放在/_src/
中,我就删除了它,并在Gruntfile.js
中用options: { config: '_src/config.rb' }
替换了它:
options: {
//config: '_src/config.rb'
cssDir: ['_src/static/css'],
sassDir: ['_src/static/_sass'],
imagesDir: ['_src/static/images'],
javascriptsDir: ['_src/static/js'],
fontsDir: ['_src/static/fonts'],
outputStyle: 'expanded',
relativeAssets: 'true',
noLineComments: 'false'
}
错误与前一个完全相同:
您必须从项目目录编译单个样式表。
第三次尝试:
最后一招,我尝试将
config.rb
放在根目录(/test
)中添加project_path = "_src"
并在Gruntfile中使用options: { config: 'config.rb' }
。这和我的其他尝试一样糟糕。我真的希望仅有Gruntfile版本能够正常工作。我想基本路径对于compass来说不太好用,但是无法想出该怎么做。
以下是我在StackExchange上阅读的内容,可以解决这个问题
我已经阅读了以下内容:
- 自动化构建 - Grunt编译Compass任务与此目录结构不兼容?- Stack Overflow
- 尝试了
relativeAssets:'false'
的技巧
- 尝试了
- Sass - Compass项目中出现“必须从项目目录编译单个样式表”错误- Stack Overflow
- 没有新想法。我的Sass,CSS,JS等目录都不同。
- 自动化构建 - Grunt编译Compass任务与此目录结构不兼容?- Stack Overflow
- 与我的问题非常相似。但是OP想要使用
config.rb
文件,并且更喜欢将其放在自己的文件夹结构中。
- 与我的问题非常相似。但是OP想要使用
- Sass - Compass项目中出现“必须从项目目录编译单个样式表”错误- Stack Overflow
- 这是一个只涉及Compass的问题,解决方法是使用
compass init
。但是,当我没有使用grunt时,我的compass还可以正常工作。因此,我忽略了这个问题。
- 这是一个只涉及Compass的问题,解决方法是使用
PS:我也使用RVM和Git。但我猜这些在这里并不重要。
更新:
小步骤... 有些进展(并不真的):
/Gruntfile.js
compass: {
dev: {
// dev options
options: {
config: 'config.rb',
cssDir: '_src/static/css',
sassDir: '_src/static/_sass'
}
},
我不明白为什么添加config.rb(而不是像上面的“第二次尝试”中一样写下所有内容),就会改变一切,grunt最终决定输出CSS文件。
/config.rb
http_path = "/"
css_dir = "static/css"
sass_dir = "static/_sass"
images_dir = "static/images"
javascript_dir = "static/js"
fonts_dir = "static/fonts"
relative_assets = false
SASS:
.logo {
background-image: image-url($logo);
//width: image-width($logo);
//height: image-height($logo);
}
已渲染的 CSS:
// relative_assets = true
// image still shows up, but it's not the sites root
// /test/_src/static/images ==> _src should be the root
background-image: url('../../../static/images/gaya-design-logo.png');
// relative_assets = false
background-image: url('/static/images/gaya-design-logo.png');
我也遇到了一个错误:
WARNING: 'gaya-design-logo.png' was not found (or cannot be read) in /Users/pattulus/Sites/test/static/images
这没问题,因为我在使用常规的compass watch
时也会遇到这个问题。然而,在使用grunt时,当我取消SASS代码中的两行注释时,它会停止运行并输出以下内容:
Errno::ENOENT on line ["28"] of /Users/pattulus/.rvm/gems/ruby-2.0.0-p451@test/gems/compass-0.12.6/lib/compass/sass_extensions/functions/image_size.rb: No such file or directory - /Users/patte/Sites/test/static/images/gaya-design-logo.png
奇怪的是,“正常指南针”可以工作。我没有全局安装指南针,这个 gem 只在这个项目文件夹中激活。所以那个可能性被排除了。