1

为 Oxid eshop 开发移动主题。我在设置 grunt 配置以将较少的文件与源映射一起编译时遇到困难，以便我可以使用 Chrome 开发人员工具。我有最新版本的 grunt 和 npm 模块。我用于测试的 Weserver 是 Windows7 上的 XAMPP。

文件结构（仅相关部分）

out
-mobile
--src
---css
---less

如您所见，魔法发生在 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 devtools ( chromium 31, Chrome 32) 文件显示为 .less 文件，而不是到目前为止还不错的 css 文件。仍然将鼠标悬停在文件名上时，路径不正确，但如下所示：

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

正如您所看到的，它向 css 路径添加了更少的路径，这当然是行不通的。

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

希望这里的社区有任何想法。谢谢你。

4

1 回答 1

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...并右键单击它并单击add to the workspace。之后，右键单击您的较少文件之一并单击map to the file system resource，您就完成了。也许您可能需要刷新页面几次，因为 Chrome 有时无法识别。

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

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

于 2014-07-11T22:18:15.147 回答