javascript - 在生产模式 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”并不是最佳实践”

Using Less.js in the browser is the easiest way to get started and convenient for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using Node.js or one of the many third party tools available.

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

谢谢

Answer 1

您的生产 Web 服务器可能不知道如何提供 .less 文件(您的 Web 服务器需要 .less 的 MIME 类型条目)。也就是说，您已经在使用 Angular 和 Webpack 了？如果是，请 Google 寻找 LESS Webpack 加载器。它将把你的 LESS 转换为 CSS，并将这个 CSS 与你的 JS 捆绑在一起。