Javascript “咕噜”；未定义变量"；导入的sass文件的错误

我正在尝试设置grunt将我的sass编译成css

实际上，我已经让它工作了，但问题是（我认为）我构造grunt文件的方式是，它编译watch任务中的每个scss文件，而不仅仅是导入所有其他文件的基本scss文件。因此，即使没有被使用，编译后的.css文件中都有丑陋的回溯语句，用于未定义变量的错误，我认为grunt运行速度要慢得多，因为它将每个sass文件编译成一个css文件，而不仅仅是一个基文件

我想让grunt识别监视任务中任何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/*";

Grunfile：

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'

---

如何修复此问题？

我将回答您的“仅编译基本scss文件”

这里有两个选项：

1） 向不希望编译的文件名添加下划线（仅导入）

• 您可以将其命名为“\u someImportedFile.scss”
• 将其作为@import“someImportedFile”导入base.scss；（无下划线）

有关更多信息，请参阅第7.1.1节。分部

2） 更新GrunFile并使用“指定”选项：

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

还有，你为什么要看css文件？如果您使用'config.rb'也可以共享它

---

希望能有帮助，干杯。

在使用咕哝的脏话时遇到了同样的问题 （Grunt sass编译与Grunt contrib sass配合良好）

错误：未定义变量“$size”。 在输出/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

谢谢！事实上，我完全忽略了我的一些文件（抛出错误的文件）没有用下划线命名的事实，因此解决了我的问题。我还从watch任务中删除了css，所以感谢您指出这一点。至于grunt的“specify”选项，我在任何地方都找不到关于该特性的文档，也找不到任何使用它的grunt文件。出于好奇，你能解释一下吗？或者告诉我在哪里有记录？我包括了config.rb，以防对您有用。整个设置是我下载并修改的一个gruntfile，以便使用drupal@mheavers您正在使用“grunt contrib compass”，因此请查看项目的github以获取文档（以及“指定”选项）：

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