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

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

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

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

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

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

Sass Custom

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

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

_variable.custom.scss

Пользовательский цвет
Пользовательский цвет

Удалите jQuery

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

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

Comment jQuery plugin
Comment jQuery plugin

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

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

Ошибка - 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 и обнаружили ошибку ниже:

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

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

"type": "module",

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

gulp запущен
gulp запущен
Photo by  Etienne Girardet  на  Unsplash
Photo by Etienne Girardet on Unsplash
Запуск PHP на IIS без использования программы установки веб-платформы
Запуск PHP на IIS без использования программы установки веб-платформы

19.03.2023 13:43

Установщик веб-платформы, предлагаемый компанией Microsoft, перестанет работать 31 декабря 2022 года. Его закрытие привело к тому, что мы не можем запускать наши php-файлы через localhost на наших компьютерах. Мне с трудом удалось установить его и я решил поделиться этой статьей, чтобы помочь тем,...

Оптимизация React Context шаг за шагом в 4 примерах
Оптимизация React Context шаг за шагом в 4 примерах

19.03.2023 13:03

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после поставщика контекста. Это позволит избежать ненужных повторных рендеров.

Библиотека для работы с мороженым
Библиотека для работы с мороженым

19.03.2023 11:50

Лично я попрощался с операторами print() в python. Без шуток.

Уроки CSS 6
Уроки CSS 6

18.03.2023 11:32

Здравствуйте дорогие читатели, я Ферди Сефа Дюзгюн, сегодня мы продолжим с вами уроки css. Сегодня мы снова продолжим с так называемых классов.

Что такое Css? Для чего он используется?
Что такое Css? Для чего он используется?

18.03.2023 11:16

CSS, или "Каскадные таблицы стилей", - это язык стилей, используемый в веб-страницах. CSS является одним из основных инструментов веб-разработки наряду с HTML и JavaScript.

Погружение в HTML и инструменты торговли
Погружение в HTML и инструменты торговли

18.03.2023 10:52

Это была невероятная первая неделя в качестве стипендиата Bytewise Frontend Development Fellow, и я очень рад поделиться со всеми вами всем тем, чему я научился!