Grunt-contrib-sass不使用指南針

Question

我是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

謝謝！

Answer 1

Grunt-contrib-sass不支持小於v1.0.0的Compass版本（在撰寫本文時為alpha版）。

用Compass更新Compass后;

gem install compass --pre

一切似乎在編譯時都能正常工作。 如上使用相同的gruntfile.js。

Answer 2

除了已知的工作版本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

Answer 3

根據grunt-contrib-compass github頁面，您需要安裝Ruby，Sass和Compass作為先決條件。 你正在使用grunt-contrib-sass而不是grunt-contrib-compass 。 請參閱contrib-compass github上的示例 。

Answer 4

我找到了另一種讓指南針在沒有紅寶石寶石的情況下工作的方法。 （雖然這有點工作）。

轉到https://github.com/Compass/compass並獲取代碼。 將core / stylesheets / compass的內容復制到sass / scss文件夾中。 現在您可以使用指南針網站上的常規導入規則。

但：

您可能需要更改一些來自指南針的import "compass/support"; ，例如import "compass/support"; 在_transitions.scss中import "../support";

Answer 5

grunt-contrib-sass完美適用於指南針，只需添加指南針：true即可。 我在onicial 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'
                }
            ]
        }
    }

Answer 6

所以這些答案都不適用於我，但它確實幫助我解決了這個問題。

使用gem install compass --pre

它安裝了另一個版本的sass，所以不要安裝sass，讓指南針安裝為你做。

所以要讓它發揮作用

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