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

Question

我使用了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。

谢谢

- hrsetyono

Answer 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"。

- n1313

---

谢谢。它可以工作，但为什么会在目标文件夹中编译一个 .map 文件呢？所以结果是两个文件：my-style.css 和 my-style.css.map？ - hrsetyono

没事了，是因为我在“选项”中添加了“sourceMap: true”。 - hrsetyono

请记住，这个语法不是特定于grunt-scss或任何其他插件的，这是grunt的本地功能。我已经添加了一个链接到文档页面。 - n1313

有人知道如何使用多个源目录和目标目录来完成这个任务吗？我有三个目录：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文件，文件名也要正确。我看到的每个示例，比如上面文档中的答案，都只有一个目标目录。 - Rin and Len

Answer 2

你应该使用通用符号：

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

在这种情况下，Grunt 将会处理 css 文件夹中所有的 *.css 文件（包括子文件夹）而不管文件名，并编译成 my-style.scss。

- Inacio Schweller

---

谢谢回复。但我希望编译后的文件与原始文件同名。此外，我有多个Sass文件需要分开（因此不使用@import）。 - hrsetyono