html - devtools 不会显示 less 文件修改的变化

标签 html css twitter-bootstrap less

我正在尝试使用 devTools 修改本地 less 文件和 sourceMaps 以直接在页面中看到结果。

我已经使用了 bootstrap 和提供的 less 文件以及 map 文件。我没有修改任何东西来确保我的第一个测试文件没有损害任何东西。

我使用的是 chrome 浏览器的最新版本。我已经在 devTools 中设置了工作区以使源文件的版本成为可能,并且我已经检查了允许 devTools 使用 sourcemap 和自动重新加载更改 css 的选项。

当我加载我的页面并检查一个元素时,less 文件链接在 css 检查器中很好地显示。

enter image description here

然而,当我直接在 devTools 中编辑 less 文件并保存时,没有任何反应。内容的外观应该改变。

你有什么建议吗?我可能做错了什么?

最佳答案

我终于明白devtools不是在处理less文件,而是在外部修改less文件时刷新页面。

从技术上讲,程序(例如 grunt-contrib-watch 模块)监视的文件越少,当它们被修改时,编译会再次生成样式表,该样式表会被 devtools 侦测并因此刷新页面。

通过在 devtools 工作区中添加 less 文件,可以在 devtools 中修改 less 文件本身。

链接后的更多信息:

grunt-contrib-watch:https://github.com/gruntjs/grunt-contrib-watch

开发工具:https://developer.chrome.com/devtools

较少:http://en.wikipedia.org/wiki/Less_(stylesheet_language)

关于html - devtools 不会显示 less 文件修改的变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29254916/

相关文章:

html - 如何控制html窗口的大小?

html - 将希伯来语(或西里尔语)字符复制/粘贴到 Notepad++ 或其他编辑器中

html - 如何设置半径边框的 CSS 样式

html - 具有高度 % 的 Div 不会通过自动溢出折叠到自身

javascript - jQuery-UI 模态叠加

html - Telerik RadButton 更改选项卡/焦点/事件上的文本颜色

jquery - 如何创建灵活的图像框架?

c# - Blazor Bootstrap 5模态: how to not bind a property to value?

twitter-bootstrap - RequireJS 的 Shim Twitter Bootstrap

jquery - 根据模式确认对话框选择关闭 Bootstrap 警报