在生產模式 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>