使用 grunt-sass 编译基础 sass答案

【问题标题】：Compiling foundation sass with grunt-sass使用 grunt-sass 编译基础 sass
【发布时间】：2017-04-16 11:38:14
【问题描述】：

当我使用 grunt 命令编译时，除了 sass 之外的所有任务都可以正常工作，它只输出 cmets @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';

【问题讨论】：

标签： javascript sass gruntjs zurb-foundation

【解决方案1】：

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

【讨论】：

问题不在于构建过程本身，它工作正常，但它只输出前 6 行注释。 @import 的其他部分根本不会编译为 css。

【解决方案2】：

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

每个组件都有一个导出 mixin，用于打印出该组件的 CSS 零件。如果你对拥有一切都很酷，你只需要一个代码行：
@include foundation-everything;

【讨论】：