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。

谢谢

Answer 1

您应该使用通用表示法：

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

在这种情况下，Grunt 将查找 css 文件夹（包括子文件夹）内的所有 *.css 文件，而不考虑文件名，并编译为 my-style.scss

Answer 2

尝试使用这种格式来指定源文件和目标文件：

    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

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

Grunt Sass - Compile all Sass files into CSS with the same name

node.js

gruntjs