javascript - 导入的 sass 文件出现 grunt "undefined variable"错误

Question

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

我实际上让它工作了，但问题(我认为)是我构建 grunt 文件的方式，它编译监视任务中的每个 scss 文件，而不仅仅是基本的 scss 文件，它导入所有其他的。因此，即使它们没有被使用，编译后的 .css 文件中都有针对 undefined variable 错误的难看的回溯语句，我想 grunt 运行得慢得多，因为它将每个 sass 文件编译成一个 css文件，而不仅仅是一个基本文件。

我想要发生的是 grunt 识别 watch 任务中任何 scss 文件的变化，但只编译基础 scss 文件。下面是我的基本 scss 文件，以及我的 grunt 文件的摘录:

基础.scss:

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


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

咕噜文件:

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 Documentation第 7.1.1 节。偏音

2) 更新您的 Gruntfile 并使用“指定”选项:

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

附言你看css文件有什么原因吗？此外，如果您使用“config.rb”，请分享它。

希望对您有所帮助，干杯。