在生产模式 Javascript 上不加载较少的文件答案

【问题标题】：Less files are not loading on production mode Javascript在生产模式 Javascript 上不加载较少的文件
【发布时间】：2019-10-17 15:40:14
【问题描述】：

我是 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>

theme-variable.less

@tb-header-bg :#012f46;

theme-style.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 进行开发，但在生产中，当性能和可靠性很重要，我们建议预编译使用 Node.js 或众多可用的第三方工具之一。

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

谢谢

【问题讨论】：

标签： javascript angular webpack less

【解决方案1】：

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

【讨论】：

我们正在使用 WLP 服务器。是的。我正在使用 webpack 但不知道如何使用 less 配置它
我也在使用 angular 4 但直接在浏览器外运行
webpack.js.org/loaders/less-loader 这个有很好的例子
好的。让我检查一下
尝试在 jsp/html 中将

【解决方案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>

【讨论】：