Question

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

我实际上有它工作，但问题（我认为）是我的grunt文件结构的方式，它是编译watch任务中的每个scss文件，而不仅仅是基本的scss文件，它导入所有的其他。因此，即使它们没有被使用，编译好的.css文件也会在未定义变量的错误中使用丑陋的回溯语句，而且我认为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”
你将它作为@import“someImportedFile”导入你的base.scss; （没有下划线）

有关详情，请参阅SASS Documentation第7.1.1节。泛音

2）更新您的Gruntfile并使用'define'选项：

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

P.S。你有什么理由看css文件吗？此外，如果您使用'config.rb'分享它。

希望它有所帮助，干杯。

Answer 2

使用grunt-sass时面临同样的问题（Grunt sass编译与grunt-contrib-sass一起正常工作）

Running "sass:build" (sass) task

错误：未定义的变量：＆＃34; $ size＆＃34;。             在第135行输出/ xxx_core / cartridge / static / default / css / scss / helpers / _mixins.scss



* /             - ^         警告：使用--force继续。

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

文件命名完全正确。经过几个小时的调试后，我发现如果我从scss文件中删除了注释代码，在我的情况下是

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

Sass编译也开始使用grunt-sass

导入的sass文件的grunt“undefined variable”错误

2 个答案: