我可以使用源映射将 .less 更改为 a.min.css 并且仍然能够在开发工具中查看 .less 文件吗？答案

【问题标题】：Can I change .less to a.min.css with a source map and still be able to view the .less files in Dev Tools?我可以使用源映射将 .less 更改为 a.min.css 并且仍然能够在开发工具中查看 .less 文件吗？
【发布时间】：2014-12-18 11:46:41
【问题描述】：

我正在使用这个 gruntfile 将我的 .less 文件更改为 .css 文件。

module.exports = function (grunt) {
    grunt.initConfig({

        less: {
            development: {
                files: [{
                    expand: true,
                    cwd: 'assets/less',
                    src: ['*.less'],
                    dest: 'wwwroot/content/css/',
                    ext: '.css'
                }]
            },
            production: {
                files: {
                    "wwwroot/content/css/script.css": ["assets/less/*.less"]
                },
                options: {
                    cleancss: true
                }
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-less");
};

对于我的开发版本，如果我有十个 .less 文件，那么这将创建十个 .css 文件，然后我将能够在 Chrome 开发工具中查看这些文件并轻松调试。

我这样做的原因是为了能够调试并查看这十个 .css Chrome 开发工具中的文件。

我的推理正确吗？我听说过源地图，但我怎么能在我的开发构建，如果我使用这些，那么我仍然可以看到源代码 .css 文件名还是十个 .less 文件更好？

【问题讨论】：

使用了地图文件，所以当你使用inspector时，你可以看到使用了什么LESS文件。

标签： javascript html gruntjs less grunt-contrib-less

【解决方案1】：

TL；DR 对你所有的问题都是肯定的；）

要在 Gruntfile 中使用源映射，只需添加如下选项

less: {
    development: {
        options: {
            sourceMap: true
        },
        files: [{
            expand: true,
            cwd: 'assets/less',
            src: ['*.less'],
            dest: 'wwwroot/content/css/',
            ext: '.css'
        }]
    },

有关可用选项的更多信息，请参阅grunt-contrib-less 页面。也许，根据您的工作环境，您应该添加 sourceMapRootpath 选项来指定文件的位置。最后，您的 .css 文件最后应该有一个很长的注释行。这就是源图。

source maps 有两个有点老但很棒的介绍：Debug LESS With Chrome Developer Tools 和 Introduction to JavaScript Source Maps

【讨论】：