css - 使用 grunt 使 css 映射指向 sass 部分

Question

我正在使用 grunt-contrib-css 来处理我的 sass 文件，这是我遵循的工作流程:

• partial.sass 包含所有样式。
• home.sass 导入 partial.sass。
• home.css 从 home.sass 创建。
• home.min.css 是 home.css 的缩小版本，包含在 .html 文件中。

但是，home.min.css 的映射指向 home.css，但我需要的是与部分文件相关的映射。这可能吗？

PD:我正在使用 grunt-contrib-sass 来处理 sass 文件，并使用 grunt-contrib-cssmin 来缩小 css。

Answer 1

你不需要使用 grunt-contrib-cssmin 来缩小你的 css，grunt sass 任务可以做到这一点。

使用 style: "compressed", 获取缩小文件，使用 style: "expanded", 进行行号调试

下面是一个示例来解决这个问题。

gruntfile.js

     //src ===============================
        var src;
        config.src = src = {
            sassMain: 'scss/home.sass',
            distFolder: 'public/stylesheets/app.dist.css',
            devFolder: 'public/stylesheets/app.dev.css',
            sassFolder: 'scss/**/*.sass'
        };

        //Sass ===============================
            var sass;
            config.sass = sass = {};

            //distribution
            sass.dist = {
                options: {
                    style: "compressed",
                    noCache: true,
                    sourcemap: 'none',
                    update: true
                },
                files: {
                    "<%= src.distFolder %>": "<%= src.sassMain %>"
                }
            };

            //development env.
            sass.dev = {
                options: {
                    style: "expanded",
                    lineNumber: true,
                },
                files: {
                    "<%= src.devFolder %>": "<%= src.sassMain %>"
                }
            };

grunt.registerTask('dev', ['concat:dev', 'sass:dev']);
    grunt.registerTask('dist', ['concat:dev', 'sass:dist']);

希望对您有所帮助。