css - CSS 源映射中的换行符

Question

我有一些 LESS，它的格式是选择器之间有空格，大括号在新行上。

body {
    background-color: #3a3a3a;
    font-family:Verdana;
}

header
{
    background-color: rgba(40, 40, 40, 0.7);
    position: relative;
    z-index: 100; 
}

#companyLogo
{
    margin-top:15px;
    margin-bottom:10px; 
    margin-left:10px; 
}

当您通过 chrome 调试器查看 less 时，它会以不同的间距出现，这会导致行号偏离。

body {
  background-color: #3a3a3a;
  font-family: Verdana;
}
header {
  background-color: rgba(40, 40, 40, 0.7);
  position: relative;
  z-index: 100;
}
#companyLogo {
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 10px;
}

这是我用来构建 less 的 Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        watch: {
            less: {
                files: ["css/*.less"],
                tasks: ["less"],
                options: {
                    livereload: true,
                }
            }
        },
        less: {
            development: {
                options: {
                    sourceMap: true,
                    //sourceMapFileInline: true,
                    sourceMapBasepath: "css/",
                    sourceMapURL: "style.css.map",
                    sourceMapFilename: "css/style.css.map"
                },
                files: {
                    "css/style.css": "css/style.less"
                }
            },
            compressed:
            {
                options: {
                    sourceMap: true,
                    //sourceMapFileInline: true,
                    compress: true,
                    sourceMapBasepath: "css/",
                    sourceMapURL: "style.min.css.map",
                    sourceMapFilename: "css/style.min.css.map"
                },
                files: {
                    "css/style.min.css": "css/style.less"
                }
            }
        }
    });

    // The following line loads the grunt plugins.
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");
};

有什么办法解决这个问题吗？

在 CSS 中工作时必须在选择器上查找而不是直接找到一行，这很糟糕。

Answer 1

我现在要采用的解决方案是格式化 less 以匹配 chrome 期望在与选择器位于同一行的左大括号。