2

libsass は sass-globbing をサポートしていないため、libsass で Dennis Becker の grunt-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 リポジトリにも投稿しました。

4

2 に答える 2

1

grunt-sass-globbing の開発者である Dennis Becker は、セットアップに関する 2 つの問題を特定するのに役立ちました。

  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";

現在、物事は順調に進んでいます。ありがとう、デニス。

于 2015-03-08T01:21:31.440 に答える
0

GitHub リポジトリ Web サイトでこれに回答しました。これは Gruntfile.js 構成の問題でした。sass_globbing タスクでターゲットが定義されていませんでした。

于 2015-03-06T09:38:53.800 に答える