导入的sass文件的grunt"undefined variable"错误

Question

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

我实际上有它的工作,但问题(我认为)是我的grunt文件结构的方式,它是编译监视任务中的每个scss文件,而不仅仅是导入所有其他scss文件的基本scss文件.因此,即使它们没有被使用,编译后的.css文件也会在未定义变量的错误中使用丑陋的backtrace语句,而且我认为grunt运行速度要慢得多,因为它将每个sass文件编译成css文件,而不仅仅是一个基本文件.

我想要发生的是grunt识别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"
• 你在base.scss中导入它作为@import"someImportedFile"; (没有下划线)

有关详细信息,请查看SASS文档部分7.1.1.谐音

2)更新您的Gruntfile并使用'specify'选项:

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

PS你有什么理由看css文件吗？如果你使用'config.rb'分享它.

希望它有所帮助,干杯.