Question

在单页面应用程序中，我有一个名为styles.less的主要较少的文件，其中包含对当前目录以及不同目录中其他较少文件的导入。进口如下：

@import "../bower_components/bootstrap-datepicker/less/datepicker.less";
@import "../bower_components/datatables/media/css/jquery.dataTables.less";
@import "../bower_components/bootstrap/less/bootstrap";
@import "../bower_components/font-awesome/less/font-awesome";
@import "../bower_components/jquery-ui/themes/base/jquery-ui";
@import "gritter";
@import "animate";
@import "animate-delay";
@import "toggles";
@import "chosen";
@import "droid";
@import "roboto";
@import "bootstrap-override";
@import "fullcalendar";
@import "style-default";
... custom styles begin here ...

我有以下使用grunt-contrib-less的grunt任务文件：

less: {
  main: {
    options: {
      strictImports: true,
      compress: true,
      sourceMap: true,
      sourceMapURL: styles.min.css.map
    },
    files: [{
      src: "css/styles.less",
      dest: "dist/css/styles.css"
    }]
  }
}

生成源图文件并且它似乎正确加载，因为当我在Chrome开发人员工具中检查元素样式时，而不是像styles.min.css:1543这样的引用，我现在得到如下引用：style-default.less:5 ，chosen.less:57等我遇到的问题是，当我点击引用时，它会将我带到相应的文件，但它是空的，所有这些。

例如，在style-default.less:5引用中，Chrome会显示网址为：http://example.com/css/css/style-default.less;但当然，该URL和文件不存在，因为所有样式都已缩小并打包到styles.min.css中。

我在上面的grunt任务中缺少什么？

Grunt较少的源图在Chrome开发工具中显示为空

0 个答案: