Less files are not loading on production mode Javascript

Question

I am new in CSS Preprocessors and trying to get my head around less.js

Following is my code:

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;
}

Well this is working fine on my localhost but when I deploy application on production mode its not working, theme-variable.less & theme-style.less files not loading/compiling and showing blank however less.js plugin is loading and showing its code.

Not able to understand where I am going wrong.

NOTE: While doing some research on Google & mentioned in the less docs I found that its not best practice to compile "less.js" directly on the browser"

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.

But currently I am not focusing on the performance issue and just want to test on prod mode.

Thanks

Answer 1

Likely your production web server doesn't know how to serve.less files (your web server needs a MIME type entry for.less). That said, you're already using angular and webpack? If yes, Google for a LESS Webpack loader. It will convert your LESS to CSS, and also bundle this CSS with your JS.

Answer 2

I solved it myself by adding less.js CDN and moving files from current location to another location.

Like this:

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