Меньше файлов не загружается в производственном режиме Javascript - PullRequest
Новая
       10

Меньше файлов не загружается в производственном режиме Javascript

0 голосов
/ 17 октября 2019

Я новичок в 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.

Спасибо

Ответы [ 2 ]

1 голос
/ 17 октября 2019

Вероятно, ваш производственный веб-сервер не знает, как обслуживать файлы .less (вашему веб-серверу нужна запись типа MIME для .less). Тем не менее, вы уже используете Angular и Webpack? Если да, Google для LESS Webpack загрузчик. Он преобразует ваш LESS в CSS, а также связывает этот CSS с вашим JS.

0 голосов
/ 18 октября 2019

Я решил это сам, добавив CDN less.js и переместив файлы из текущего местоположения в другое местоположение.

Примерно так: 

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