導入的sass文件的grunt“undefined variable”錯誤

Question

我正在嘗試設置grunt將我的sass編譯成css。

我實際上有它的工作，但問題（我認為）是我的grunt文件結構的方式，它是編譯監視任務中的每個scss文件，而不僅僅是導入所有其他scss文件的基本scss文件。 因此，即使它們沒有被使用，編譯后的.css文件也會在未定義變量的錯誤中使用丑陋的backtrace語句，而且我認為grunt的運行速度要慢得多，因為它將每個sass文件編譯成css文件，而不僅僅是一個基本文件。

我想發生的事情是咕unt地認出watch任務中任何scss文件中的更改，但只能編譯基本的scss文件。 下面是我的基本scss文件，以及我的grunt文件的摘錄：

base.scss：

@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "toolkit-no-css";


@import "variables/**/*";
@import "abstractions/**/*";
@import "base/**/*";
@import "components/**/*";
@import "pages/*";

gruntfile：

module.exports = function (grunt) {

  grunt.initConfig({
    watch: {
      sass: {
        files: ['sass/{,**/}*.{scss,sass}'],
        tasks: ['compass:dev'],
        options: {
          livereload: false
        }
      },
      css: {
        files: ['css/{,**/}*.css']
      }
    },
    compass: {
      options: {
        config: 'config.rb',
        bundleExec: true,
        force: true
      },
      dev: {
        options: {
          environment: 'development'
        }
      },
      dist: {
        options: {
          environment: 'production'
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-shell');

  grunt.registerTask('build', [
    'uglify:dist',
    'compass:dist',
    'jshint'
  ]);

};

更新：這是我的config.rb：

saved = environment
if (environment.nil?)
  environment = :development
else
  environment = saved
end

# Location of the theme's resources.
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
generated_images_dir = images_dir + "/generated"
javascripts_dir = "js"

# Require any additional compass plugins installed on your system.
require 'compass-normalize'
require 'rgbapng'
require 'toolkit'
require 'singularitygs'
require 'sass-globbing'

##
## You probably don't need to edit anything below this.
##


output_style = (environment == :production) ? :expanded : :nested

line_comments = (environment == :production) ? false : true


sass_options = (environment == :production) ? {} : {:debug_info => false} #MH  - turned off debugging - doesn't seem to be rendering properly

add_import_path 'sass'

我該如何解決？

Answer 1

我將回答你的'只編譯基礎scss文件'。

你有兩個選擇：

1）在文件名中添加下划線，您不想編譯（僅導入）

• 你把它命名為“_someImportedFile.scss”
• 您將其作為@import“ someImportedFile”導入base.scss中； （沒有下划線）

有關詳細信息，請查看SASS文檔部分7.1.1。 諧音

2）更新您的Gruntfile並使用'specify'選項：

compass: {
    dev: {
        options: {
            sassDir: 'sass',
            cssDir: 'css',
            environment: 'development',
            specify: 'base.scss'
        }
   }
}    

PS您看css文件有什么原因嗎？ 如果你使用'config.rb'分享它。

希望它有所幫助，干杯。

Answer 2

使用grunt-sass時遇到相同的問題（Grunt sass編譯與grunt-contrib-sass正常工作）

Running "sass:build" (sass) task

錯誤：未定義的變量：“$ size”。 在output / xxx_core / cartridge / static / default / css / scss / helpers / _mixins.scss的第135行上

* / - ^警告：使用--force繼續。

由於警告而中止。 在這里輸入代碼

文件命名完全正確。 經過幾個小時的調試后，我發現如果我從scss文件中刪除了注釋代碼，我的情況就是這樣

/*
@mixin arialFont($size, $lineHeight, $family) {
   font: #{$size}/#{$lineHeight} $family
} 
*/

Sass編譯也開始與grunt-sass一起使用