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>

主题变量较少

@tb-header-bg :#012f46;

主题样式。

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

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

这在我的本地主机上工作正常，但是当我在生产模式下部署应用程序时，它无法正常工作，theme-variable.less & theme-style.less文件未加载/编译并显示空白，但是less.js插件正在加载并显示其代码。

无法理解我要去哪里。

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

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

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

谢谢

Answer 1

很可能您的生产Web服务器不知道如何提供.less文件（您的Web服务器需要.less的MIME类型条目）。也就是说，您已经在使用angular和webpack？如果是，请使用Google作为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>

更少的文件无法在生产模式Javascript上加载

2 个答案: