Question

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

文件结构（仅限相关部分）

出
- 移动
--src
--- CSS
---少

正如你所看到的那样，魔术发生在out / mobile / src / less和out / mobile / src / css中。

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

// 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

似乎也没问题。

现在铬开发工具（铬31，铬32）文件显示为.less文件，而不是css，到目前为止还不错。仍然当悬停在文件名上时，路径不正确，但是这样的事情：

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

正如你所看到的那样，广告通往css路径的路径越少，这当然是行不通的。

我错过了什么？有没有办法有正确的路径？或者grunt-contrib-less / Chrome开发工具不具备此功能？

希望社区有任何想法。谢谢。

Answer 1

我有同样的问题，经过一番挖掘后才明白。

问题在于：Chrome实际上并不知道真实目录的位置。你应该明确说出

Ok Chrome这里是目录：

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

并且您不知道此服务器路径的含义。这是你应该寻找它的路径：

c:\out\mobile\src\less\custom.less＆＃34;

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

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

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

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

1 个答案: