Grunt-contrib-sass 不使用指南针答案

【问题标题】：Grunt-contrib-sass not working with compassGrunt-contrib-sass 不使用指南针
【发布时间】：2014-05-27 08:30:54
【问题描述】：

我是 Grunt 的新手，正在尝试配置 grunt-contrib-sass 以与 Compass 一起工作。

我正在使用 grunt-contrib-sass 插件，因为我需要将我的 .scss 文件导出到两个不同的目标，而我无法使用 grunt-contrib-compass。

我遇到的问题是，在编译 .scss 文件时，我在终端中收到“错误：无法加载罗盘”。

这是我的 gruntfile.js 的副本；

module.exports = function(grunt){

  grunt.initConfig({

    uglify: {
      my_target: {
        files: {
          'wp-content/themes/mytheme/js/functions.js' : [ 'components/js/*.js' ] 
        }
      }
    }, // uglify

    sass:{
      dist:{
        files: {
          'wp-content/themes/mytheme/style.css' : 'components/sass/style.scss',
          'wp-content/themes/mytheme/css/ie.css' : 'components/sass/ie.scss '
        },
      options: {
        compass: true,
      }
    }
  },

  watch: {
    scripts : {
      files: ['components/js/*.js'],
      tasks: ['uglify']
    },
    css: {
      files: [ 'components/sass/*.scss'],
      tasks: [ 'sass' ],
      options: { livereload: true }
    },
    livereload: {
      options: { livereload: true },
      files: ['wp-content/themes/mytheme/'],
    },
  } // watch

})

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

grunt.registerTask( 'default', 'watch' );

} // exports

谢谢！

【问题讨论】：

标签： javascript gruntjs

【解决方案1】：

根据grunt-contrib-compass github 页面，您需要先安装 Ruby、Sass 和 Compass。您使用的是grunt-contrib-sass 而不是grunt-contrib-compass。请参阅 contrib-compass github 上的 examples。

【讨论】：

是的，所有已安装并运行最新的稳定版本。
如果你运行grunt -v，输出是什么。您可以将其添加到您的问题中吗？
是的，我可以，尽管 Grunt 在编译 sass 和观看等方面工作得很好。我只是无法导入 Compass 的任何库。
您使用的是grunt-contrib-sass。看看我的编辑是否有帮助。
感谢@mmjmanders 的编辑。从那以后，我就有点头疼了。看来 grunt-contrib-sass 不支持 Compass 版本

【解决方案2】：

Grunt-contrib-sass 不支持低于 v1.0.0 的 Compass 版本（在撰写本文时处于 alpha 阶段）。

更新指南针后；

gem install compass --pre

在编译时一切似乎都运行良好。使用与上面相同的 gruntfile.js。

【讨论】：

【解决方案3】：

删除除已知工作版本 3.2.19 之外的所有 sass 版本解决了我的问题。

$ sudo gem uninstall sass
Select gem to uninstall:
 1. sass-3.2.3
 2. sass-3.2.5
 3. sass-3.2.19
 4. sass-3.3.5
 5. All versions
> 4

【讨论】：

【解决方案4】：

我找到了另一种在没有 ruby gem 的情况下让指南针工作的方法。（虽然这有点工作）。

转到https://github.com/Compass/compass 并获取代码。将 core/stylesheets/compass 的内容复制到 sass/scss 文件夹中。现在您可以使用来自 compass-website 的正常导入规则。

但是：

您可能需要将 _transitions.scss 中的 import "compass/support"; 等指南针的某些导入更改为 import "../support";

【讨论】：

【解决方案5】：

grunt-contrib-sass 与 compass 完美配合，只需在选项中添加 compass: true 即可。我在官方 git 存储库上阅读了这一点。

例子

sass: {
        dist: {
            options: {
                style: 'expanded',
                compass: true
            },
            files: [
                {
                    expand: true,
                    cwd: 'ipa-framework/src/css/scss',
                    src: ['*.scss'],
                    dest: 'ipa-framework/src/css',
                    ext: '.css'
                }
            ]
        }
    }

【讨论】：

【解决方案6】：

所以没有一个答案完全适合我，但它确实帮助我解决了问题。

当您使用安装指南针时 gem install compass --pre

它会安装另一个版本的 sass，所以根本不要安装 sass，让 compass 安装为您完成。

为了让它工作

gem uninstall sass
gem install compass --pre

作为参考，这是我需要让它工作的 npm 库

npm install -g grunt grunt-contrib-sass grunt-contrib-watch grunt-livereload sass grunt-contrib-cssmin grunt-contrib-compass

【讨论】：