Question

当我使用 grunt 命令进行编译时，除了 sass 之外的所有任务都可以正常工作，只需输出 @import 部分内的注释 foundation.scss 没有编译。

问题是什么？这是我的gruntfile.js

        module.exports = function(grunt) {

    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/js/*.js',
        dest: 'js/script.min.js'
      },
      dev:{
        options:{
          beautify: true,
          mangle: false,
          compress:false,
          preserveComments: 'all'
        },
        src: 'src/js/*.js',
        dest: 'js/script.min.js'
      }
    },
    sass: {
      dev:{
        options:{
          outputStyle: 'expanded'
        },
        files:{
          'css/app.css' : 'node_modules/foundation-sites/scss'
        }
      },
      build:{
        options:{
          outputStyle: 'compressed'
        },
        files:{
          'css/app.css' : 'node_modules/foundation-sites/scss'
        }
      }
    },
    watch:{
      js: {
        files: ['src/js/*.js'],
        tasks: ['uglify:dev']
      },
      css: {
        files: ['node_modules/foundation-sites/scss/**/*.scss'],
        tasks: ['sass:dev']
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-sass');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev', 'sass:dev']);
  grunt.registerTask('build', ['uglify:build', 'sass:build']);

};

这是我的foundation.scss文件：

/**
 * Foundation for Sites by ZURB
 * Version 6.2.4
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

// Sass utilities
@import 'util/util';

// Global variables and styles
@import 'global';

// Components
@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
@import 'components/dropdown-menu';
@import 'components/dropdown';
@import 'components/flex';
@import 'components/flex-video';
@import 'components/label';
@import 'components/media-object';
@import 'components/menu';
@import 'components/menu-icon';
@import 'components/off-canvas';
@import 'components/orbit';
@import 'components/pagination';
@import 'components/progress-bar';
@import 'components/reveal';
@import 'components/slider';
@import 'components/sticky';
@import 'components/switch';

Answer 1

你应该使用foundation watch来管理构建过程，不是吗？在这里阅读：http://foundation.zurb.com/sites/docs/installation.html

Answer 2

您是否忘记了导入documentation中所述的Foundation的所有组件？

每个组件都有一个导出mixin，该输出可打印出该CSS的CSS 零件。如果您乐于拥有所有东西，则只需要一个代码行：
@include foundation-everything;

使用grunt-sass编译基础sass

2 个答案: