试图将 sass/scss 文件编译成 css 文件（一对一）

Question

我们正在尝试将 sass 文件编译为 css 文件，但是我们希望将每个单独的 sass 文件编译为单独的 css 文件（一对一）。

例如我们的 product_view.scss 应该有一个 product_view.css。

然而，我们尝试的所有配置都为我们的“out/css”文件夹中名为 styles.css 的所有内容创建了一个 css 文件。

sass: {
    dist: {
        options: {
            compass: true,
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: '<%= pkg.src %>/assets/sass',
            src: ['*.scss'],
            dest: '<%= pkg.src %>/assets/media/out/css',
            ext: '.css'
        }]
    },

},

Answer 1

我使用grunt-contrib-compass (Compass) 来编译我的 SASS，它有一些不错的附加功能。例如，指南针包含一个重置实用程序，您可以通过使用来使用

@import 'compass/reset';

但不管怎样，compass 也会单独输出每个文件（只要它不以_ 开头，这些文件可以包含但不会自行编译）。这是我在 gruntfile 中使用的设置：

compass: {
    'default': {
        options: {
            sassDir: "css/sass/",
            cssDir: "css/",
            outputStyle: "compressed"
        }
    }
}