是否可以在文件较少的 Chrome 开发人员工具中工作？答案

【问题标题】：Is it possible to work in Chrome developer tools with less files?是否可以在文件较少的 Chrome 开发人员工具中工作？
【发布时间】：2014-02-28 16:31:48
【问题描述】：

为 Oxid eshop 开发移动主题。我很难设置一个 grunt 配置来编译更少的文件和一个源映射，这样我就可以使用 Chrome 开发人员工具。我有最新版本的 grunt 和 npm 模块。我用于测试的 Weserver 是 Windows7 上的 XAMPP。

文件结构（仅相关部分）

出
-移动
--src
---css
---少

如您所见，魔法发生在 out/mobile/src/less 和 out/mobile/src/css 中。

我的 Gruntfile.js： less 部分看起来像这样：

// Compile specified less files
        less: {
            compile: {
                options: {
                    // These paths are searched for @imports
                    paths: ["out/mobile/src/less"],
                    sourceMap: true,
                    sourceMapFilename: 'out/mobile/src/css/oxid.css.map',
                    sourceMapBasepath: 'out/mobile/src/css',
                },

                files: {
                    // target.css file: source.less file
                    "out/mobile/src/css/oxid.css": "out/mobile/src/less/oxid.less"
                }
            }
        },

哪个有效：它输出 css 和 souremap.css.map

在生成的css文件的末尾有

 /*# sourceMappingURL=oxid.css.map */

我觉得还可以

sourcemap 文件中的文件路径如下所示：

out/mobile/src/less/custom.less

这似乎也可以。

现在是 chrome 开发工具（铬 31、铬 32）文件显示为 .less 文件，而不是到目前为止还不错的 css。仍然将鼠标悬停在文件名上时，路径不正确，但如下所示：

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less

如您所见，它会向 css 路径添加 less 路径，这当然是行不通的。

我错过了什么？有没有办法获得正确的路径？还是 grunt-contrib-less /Chrome dev-tools 无法做到这一点？

希望社区提供任何想法。谢谢。

【问题讨论】：

这里有同样的问题。你找到解决办法了吗？
不，我没有。仍在等待知道解决方案的人。
我做了 :) 检查下面的答案。

标签： less google-chrome-devtools oxid grunt-contrib-less

【解决方案1】：

我有同样的问题，经过一番挖掘后理解。

问题是：Chrome 实际上并不知道真正的目录在哪里。你应该明确地说

好的 Chrome 在这里是目录：

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less

你不知道这个服务器路径是什么意思。这是您应该寻找的路径：

c:\out\mobile\src\less\custom.less"

为此，您应该将 less 文件夹添加到工作区。转到源选项卡，找到css/out/mobile/src... 之类的目录，然后右键单击它并单击添加到工作区。之后，右键单击您的 less 文件之一，然后单击 map to the file system resource 就完成了。也许您可能需要刷新页面几次，因为 Chrome 有时无法识别。

这是完整的教程： http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636

检查自己是否正确执行了第 1-4 步。

【讨论】：