css - 尝试将 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"
        }
    }
}