Настройка шаблона Metronic с помощью Webpack и Gulp

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они постоянно обновляют версию (а нам нужно быстро наверстать упущенное!).

Обратите внимание: я использую HTML шаблон

Итак, вот краткое изложение

Gulp & Webpack Быстрый старт

Metronic - Bootstrap 5 HTML, VueJS, React, Angular. Laravel, Asp.Net Core, Ruby on Rails, Spring Boot, Blazor, Django, Express.js, Node.js, Flask Admin Dashboard Theme & Template

Sass Custom

Metronic использует Sass, чтобы получить полную документацию, пожалуйста, посетите :

Metronic - Bootstrap 5 HTML, VueJS, React, Angular. Laravel, Asp.Net Core, Ruby on Rails, Spring Boot, Blazor, Django, Express.js, Node.js, Flask Admin Dashboard Theme & Template

Расположение файла \metronic\demo2\src\sass\components

_variable.custom.scss

Удалите jQuery

Metronic предоставляет возможность исключить jQuery, если вы хотите использовать другой JS фреймворк, например, Vue.js.

В файле \metronic\tools\gulp.config.js вы можете оставить комментарий, чтобы исключить плагин jQuery:

Однако, вы должны следовать рекомендациям:

Metronic - Bootstrap 5 HTML, VueJS, React, Angular. Laravel, Asp.Net Core, Ruby on Rails, Spring Boot, Blazor, Django, Express.js, Node.js, Flask Admin Dashboard Theme & Template

Устранение неполадок

Ошибка - npm run build

Если мы используем Webpack для сборки и получаем эту ошибку:

[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead

Просто удалите следующую строку в package.json, потому что эта опция предназначена только для Gulp:

"type": "module",

А затем попробуйте запустить снова :

Ошибка Gulp : SyntaxError: Cannot use import statement outside a module

Если мы используем Gulp и обнаружили ошибку ниже:

Это означает, что нам нужно добавить :

"type": "module",

И попробовать запустить снова: