我可以在链接元素 href 跨浏览器中使用 .less 吗？答案

【问题标题】：Can I use .less in link element href cross-browser?我可以在链接元素 href 跨浏览器中使用 .less 吗？
【发布时间】：2014-09-02 08:06:35
【问题描述】：

我正在使用dotless 和bundling 开发一个ASP.NET MVC 应用程序。

当我的 CSS 优化后，我会得到一个 link，例如：

<link href="/bundles/global.css?v=xxxxx" rel="stylesheet"/>

但是，当优化被禁用时，我得到：

<link href="/css/header.less" rel="stylesheet"/>
<link href="/css/content.less" rel="stylesheet"/>
<link href="/css/footer.less" rel="stylesheet"/>

在 Chrome 中，这些 less 文件可以正常读取。

但是，将.less 文件直接用作样式表是常见的做法吗？

我担心某些浏览器可能无法识别样式表，因为它们不以 .css 结尾，因此会忽略它们。

更新：为了澄清，.less 文件是在服务器端预编译的，因此是有效的 CSS 文件。没有发生客户端处理。

【问题讨论】：

【解决方案1】：

我很确定，只要用户启用了 Javascript，那么唯一可以处理 .less 文件并将其解释为 CSS 的东西就是 less.js 库。您也可以查看他们的Browser Support。

我也不建议在生产中使用 LESS，因为它的全部目的是帮助您创建动态样式表，甚至比开发中的正常速度更快。如果您将其留在生产中，那么每次浏览器加载页面时，它都必须下载较少的文件并渲染它们，这比简单地将文件编译成一个 .css 文件更耗时。

编辑：

对于扩展名为.less 的文件，您可以通过将服务器上的MIME 类型设置为text/css 来确保浏览器不会拒绝您的文件并将您的less 文件视为css 文件。

例如，如果您使用的是 Apache，则可以使用以下 .htaccess 文件来执行此操作。

AddType text/css .less

【讨论】：