文章/答案/技术大牛

发布

社区首页 >问答首页 >Grunt + Compass不创建CSS文件

问Grunt + Compass不创建CSS文件
EN

Stack Overflow用户

提问于 2014-04-27 16:53:45

回答 1查看 4.1K关注 0票数 4

使用grunt compass时会出现以下错误

“您必须从项目目录编译各个样式表。”

我尝试了三种不同的方法。下面会有更多。

我的文件夹结构：

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']);
};

从grunt运行/test不会出错，它甚至可以识别文件更改，但不编译我的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的版本。我想指南针的基本路线不太好，但不知道该怎么做。

为了解决这个问题，摘录了我在StackExchange上已经读到的内容

我已经读过了：

build automation - Grunt compass task not compatible with this directory structure? - Stack Overflow
- 尝试了relativeAssets: 'false'的诡计

sass - "You must compile individual stylesheets from the project directory" error with compass project - Stack Overflow
- 这里没有新想法。我的目录都是不同的Sass，CSS，JS等。

build automation - Grunt compass task not compatible with this directory structure? - Stack Overflow
- 跟我的问题很相似。但是OP想要使用config.rb文件，并且希望它在他的文件夹结构中。

sass - "You must compile individual stylesheets from the project directory" error with compass project - Stack Overflow
- 一个只有指南针的问题，以compass init为解决方案。尽管如此，我的指南针在使用时不会发出咕噜声。所以我驳回了这个案子。

PS:我也使用RVM和Git。但我想这些在这里并不重要。

更新：

小步…取得了一些进展(不是很大)：

/Gruntfile.js

compass: {
    dev: {
        // dev options
        options: {
            config: 'config.rb',
            cssDir: '_src/static/css',
            sassDir: '_src/static/_sass'
        }
    },

我不明白为什么要添加config.rb (而不是像上面的“第二次尝试”那样将其全部写下来，而是更改所有内容，并最终决定输出一个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时也得到了这个。但是，当我取消注释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

奇怪的是“普通指南针”起作用了。我没有在全球范围内安装指南针，创业板只在这个项目文件夹中活动。所以这种可能性被排除了。

node.js

sass

gruntjs

compass-sass

grunt-contrib-compass

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-27 21:07:46

最后(经过一天的尝试和错误)，它归结为将relativeAssets设置为false。

我在“第二次尝试”中的错误是将布尔值放在像这个relativeAssets: 'false',而不是relativeAssets: false,中。

还有一些对basePath和“更多”的修改。

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Config
        watch: {
            compass: {
                files: ['**/*.{scss,sass}'],
                tasks: ['compass:dev']
            },
        },

        compass: {
            dev: {
                // dev options
                options: {
                    httpPath: '/',
                    basePath: '_src',
                    cssDir: 'static/css',
                    sassDir: 'static/_sass',
                    imagesDir: 'static/images',
                    javascriptsDir: 'static/js',
                    fontsDir: 'static/fonts',
                    outputStyle: 'expanded',
                    relativeAssets: false,
                    noLineComments: false
                }
            },
        },
        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']);
};

这真是漫长的一天…事实上，从周五开始，我就一直在尝试这样运行(使用browserSync和所有的战利品)。希望这对下一个人有帮助。

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23326211

复制

相似问题

问Grunt + Compass不创建CSS文件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Grunt + Compass不创建CSS文件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Grunt + Compass不创建CSS文件
EN