几个带有 grunt-contrib-compass 的 CSS 输出

Question

我正在使用grunt-contrib-compass 将我的 SCSS 文件处理成单个 CSS 文件。基本上，compass 会考虑所有匹配 app/styles/**/*.scss 的 SCSS 文件并将它们编译成 .tmp/styles/main.css。

我想将此行为拆分为：

1. app/styles/specific/**/*.scss 到 .tmp/styles/specific.css
2. app/styles/**/*.scss 到 .tmp/styles/main.css（忽略 specific）

但是，我不知道如何为我的配置文件配置 grunt，这很简单：

options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    relativeAssets: true
}

我想不出任何解决方案，尤其是因为指南针文档指出cssDir 和sassDir 只允许字符串作为参数。这是否必须在其他任务中完成？

Answer 1

我认为您应该尝试对指南针具有内部支持的 grunt-contrib-sass：
https://npmjs.org/package/grunt-contrib-sass

来自文档：

compass 
Type: Boolean
Default: false

Make Compass imports available and load project configuration 
(config.rb located close to the Gruntfile.js).

您可以使用 gruntjs 的全局模式：
http://gruntjs.com/configuring-tasks#globbing-patterns

sass: {
 dist: {
  files: [
    {
      src: 'app/styles/specific/**/*.scss', 
      dest:'.tmp/styles/specific.css'
    },
    {
      src: ['app/styles/**/*.scss', '!app/styles/specific/**/*.scss'],    
      dest:'.tmp/styles/main.css'
    }
  ]
 }
}