对导入的sass文件发出“未定义变量”错误

Question

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

我确实让它工作了，但问题(我想)是，按照我对grunt文件的结构化方式，它正在编译监视任务中的每个scss文件，而不仅仅是导入所有其他文件的基本scss文件。因此，即使没有使用编译后的.css文件，对于未定义变量上的错误，编译后的文件都有难看的回溯语句，我认为grunt的运行速度要慢得多，因为它正在将每个sass文件编译成一个css文件，而不仅仅是一个基本文件。

我想要做的是识别监视任务中任何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“
• 在base.scss中将其导入为@import "someImportedFile"；(没有下划线)

有关更多信息，请参阅SASS Documentation 7.1.1节。部分数

2)更新Gruntfile并使用“指定”选项：

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

你有什么理由看css文件吗？同样，如果你使用'config.rb‘分享它。

希望能帮上忙，干杯。

Answer 2

在使用grunt-sass时也面临着同样的问题( Grunt sass编译对grunt-cont肋骨-sass很好)

Running "sass:build" (sass) task

错误:未定义变量："$size“。在output/xxx_core/cartridge/static/default/css/scss/helpers/_mixins.scss的第135行 *-^警告:使用-继续使用武力。

由于警告而中止。在这里输入代码

文件命名是完全正确的。经过数小时的调试，我发现如果从scss文件中删除注释代码，在我的示例中是

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

Sass编译也开始使用grunt-sass。