grunt-sass-globbing插件结构的问题

时间:2015-03-03 17:38:47

标签: css gruntjs libsass sass-globbing

我试图使用Dennis Becker与libsass的grunt-sass-globbing插件,因为libsass不支持sass-globbing。 https://github.com/DennisBecker/grunt-sass-globbing

我已尝试使用开发人员提供的文档设置libsass项目。

我无法确定需要放置文件的确切位置以及应如何调用导入。

以下设置会引发此错误:

Running "sass_globbing:files" (sass_globbing) task

Running "sass:app" (sass) task
>> file to import not found or unreadable: layout/**/*
>> Current dir: /Users/dlahay/Documents/Workspaces/SusyLibsass/css/sass/
>>   Line 3  Column 9  css/sass/main.scss

文件结构:

css
|_ main.css
|_ sass
    |_ layout
        |_ _base.scss
    |_ typography
        |_ _base.scss
    |_ _layoutMap.scss
    |_ _typographyMap.scss
    |_ main.scss

Gruntfile.js

grunt.initConfig({
    sass_globbing: {
      files: {
        'css/sass/_layoutMap.scss': 'css/sass/layout/**/*.scss',
        'css/sass/_typographyMap.scss': 'css/sass/typography/**/*.scss',
      },
      options: {
        useSingleQuotes: false
      }
    },

    // Grunt-sass
    sass: {
      app: {
        files: [{
          expand: true,
          cwd: 'css/sass',
          src: ['*.scss'],
          dest: 'css',
          ext: '.css'
        }]
      },
      options: {
        sourceMap: false,
        outputStyle: 'nested',
        imagePath: "../",
      }
    },

    // Grunt-contrib-watch
    watch: {
      sass: {
        files: ['css/sass/**/*'],
        tasks: ['sass']
      },
      options: {
        livereload: true,
        spawn: false
      }
    },
});

grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-globbing');

grunt.registerTask('default', ['sass_globbing', 'sass', 'watch']);

main.scss:

@import "../../bower_components/susy/sass/susy";

@import "layout/**/*";
@import "typography/**/*";

我也在grunt-sass-globbing回购中发布了这个问题。

2 个答案:

答案 0 :(得分:1)

grunt-sass-globbing的开发人员Dennis Becker帮助我确定了我的设置中的两个问题:

  1. 我没有在Gruntfile中的sass_globbing任务中识别目标:

    sass_globbing: {
         my_target: {
            files: {
                'css/sass/_layoutMap.scss': 'css/sass/layout/**/*.scss',
                'css/sass/_typographyMap.scss': 'css/sass/typography/**/*.scss',
            },
        },
        options: {
            useSingleQuotes: false
        }
    },
    
  2. 我的main.scss应该在@import中有地图文件的名称:

    @import "../../bower_components/susy/sass/susy";
    
    @import "layoutMap";
    @import "typographyMap";
    
  3. 事情现在正在顺利进行。谢谢,丹尼斯。

答案 1 :(得分:0)

我已在GitHub存储库网站上回答了这个问题。这只是Gruntfile.js配置的一个问题 - 你没有在sass_globbing任务上定义目标。