Grunt Sass - 将所有 Sass 文件编译成同名的 CSS答案

【问题标题】：Grunt Sass - Compile all Sass files into CSS with the same nameGrunt Sass - 将所有 Sass 文件编译成同名的 CSS
【发布时间】：2015-08-11 18:11:41
【问题描述】：

我使用了 Compass，它将所有 Sass 文件编译成同名的 CSS。例如my-style.scss 将变为my-style.css。

我发现的所有关于 grunt-sass 的教程都一一映射了文件名，手动比如：

sass: {
  dist: {
    options: { style: 'compressed' },
    files: { 'css/my-style.css': 'sass/my-style.scss' }
  } 
}

有没有办法让它更灵活？所以每当我有新的 Sass 文件时，我都不需要更改 Gruntfile。

谢谢

【问题讨论】：

标签： node.js gruntjs

【解决方案1】：

试试这个格式来指定你的源文件和目标文件：

    sass: {
        src: {
            files: [{
                expand: true,
                cwd: 'source/styles/',
                src: ['**/*.scss'],
                dest: 'destination/styles/',
                ext: '.css'
            }]
        }
    }

这读作“获取source/styles/及其子文件夹中与*.scss匹配的所有文件，处理它们并将它们放入destination/styles/，将扩展名更改为.css。另见http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

【讨论】：

谢谢。它有效，但为什么有一个.map 文件编译到目标文件夹中？所以结果是两个文件：my-style.css 和 my-style.css.map?
没关系，这是因为我在options 中添加了sourceMap: true
请记住，这种语法并不是 grunt-scss 或任何其他插件所特有的，这是 grunt 的原生特性。我添加了指向文档页面的链接。
任何人都知道如何做到这一点，但有多个源和目标目录？我有：dirApples & dirPears & dirGrapes，每个都包含相同的子目录结构，我想找到每个 scss：dirApples> sub1/css/file.scss, dirApples/sub2/css/name.scss && dirPears> sub1/css/file.scss, dirPears/sub2/css/name.scss 。我想获取所有这些 scss 文件并在文件名正确的相同目录中输出 css。我看到的每个示例，就像上面来自 teh docs 的答案一样，都有一个目的地。

【解决方案2】：

你应该使用通用符号：

sass: {
  dist: {
    options: { style: 'compressed' },
    files: { 'css/*/**.css': 'sass/my-style.scss' }
  } 
}

在这种情况下，无论文件名如何，Grunt 都会查找 css 文件夹（包括子文件夹）内的所有 *.css 文件，并编译为 my-style.scss

【讨论】：

感谢您的回复。但我希望编译后的名称与原始名称相同。我还有多个需要分离的 Sass 文件（所以没有@import）