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

Question

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

• partial.sass包含所有样式。
• home.sass导入部分.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']);

我希望这可以帮助你。