在生产模式 Javascript 下不加载较少的文件

Question

我是 CSS 预处理器的新手，并试图了解 less.js

以下是我的代码：

Main.jsp：

<link rel="stylesheet/less" type="text/css" href="${pageContext.request.contextPath}/js/theme/theme-style.less"/>
<link rel="stylesheet/less" type="text/css" href="${pageContext.request.contextPath}/js/theme/theme-variable.less"/>
<script src="${pageContext.request.contextPath}/less/less.js"></script>

主题变量.less

@tb-header-bg :#012f46;

主题风格.less

@import "./theme-variable.less";

.th-background-header {
  background: @tb-header-bg;
}

好吧，这在我的本地主机上运行良好，但是当我在生产模式下部署应用程序时它不起作用， theme-variable.less & theme-style.less文件没有加载/编译并显示空白但是 less.js 插件正在加载并显示其代码.

无法理解我哪里出错了。

注意：在对 Google 进行一些研究并在 less 文档中提到时，我发现直接在浏览器上编译“less.js”并不是最佳实践”

在浏览器中使用 Less.js 是开始使用 Less.js 开发的最简单方法，但在生产中，当性能和可靠性很重要时，我们建议使用 Node.js 或许多可用的第三方工具之一进行预编译。

但目前我并不关注性能问题，只想在 prod 模式下进行测试。

谢谢

Answer 1

您的生产 web 服务器可能不知道如何提供.less 文件（您的 web 服务器需要一个 MIME 类型条目 for.less）。 也就是说，您已经在使用 angular 和 webpack？ 如果是，谷歌搜索 LESS Webpack 加载程序。 它会将您的 LESS 转换为 CSS，并将此 CSS 与您的 JS 捆绑在一起。

Answer 2

我通过添加 less.js CDN 并将文件从当前位置移动到另一个位置自己解决了这个问题。

像这样：

<link rel="stylesheet/less" type="text/css" href="${pageContext.request.contextPath}/less/theme-style.less"/>
    <link rel="stylesheet/less" type="text/css" href="${pageContext.request.contextPath}/less/theme-variable.less"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>