Используйте меньше (оптимальный способ) в апплете WeChat

Апплет WeChat

привык писатьless/sass, но сейчас разработки малых программ все равно не хватаетcss, очень непривычно. Учебники, которые искали в Интернете, либо gulp, либо vscode.Easy-lessплагин.

традиционный способ

Давайте сравним преимущества и недостатки этих двух методов.

Gulp
бывший кgulpЕсть простое понимание, но теперь оно работаетwebpackСказать,gulpС меньшим количеством людей, но также имеет некоторые затраты на обучение, но хорошие новости от определения высокой степени, он может легко добавить взять.

Плагин без Esay для Vscodd
Ничего не говори, он очень ароматный, прямо вvscodeУстановитьeasy-lessплагин, тоseting.json, вы можете использовать его с удовольствиемlessохватывать

Сохраните его, и вы можете сгенерировать его в том же каталоге..wxssфайл, недостатком является то, что он должен бытьvscodeДругими словами, вам нужно открыть два редактора во время разработки и использовать их одновременно.vscodeНапишитеless, во время использования инструмента разработчика WeChat, чтобы увидеть предварительный просмотр ... эммммм, картинка слишком красива, чтобы ее можно было представить

новый способ

Случайно увидел в сетиВы хотите использовать меньше в апплете? (версия VScode)Кто-то выложил скриншот

Easy-less используется непосредственно в инструменте разработчика WeChat, функция такая же, как и в vscode,

К моему удивлению, я побежал смотреть официальную документацию, оказалось, что инструменты разработчика WeChat начали поддерживать инструменты расширения еще в версии 1.03.2004271.

И вы можете напрямую использовать расширение vscode, что очень удобно

После ряда собственных операций это оказалось возможным.

шаг

  1. Установка Vscode Easy-less

  1. папка расширения

Его распакованную папку можно найти в ~/.vscode/extensions (системы macOS) или C:\Users\username.vscode\extensions (системы Microsoft Windows).

копироватьmrcrowl.easy-less-1.6.3файл в инструменты разработчика WeChat 3. Вставьте папку расширения Откройте Инструменты разработчика WeChat, верхняя панель, Настройки > Настройки расширения > Расширения > Пользовательские расширения. Нажмите «Открыть папку расширения», после чего откроется папка, просто вставьте ее сюда.

  1. установить output.wxss

Последний шаг все еще здесь, потому что Easy-less, выходной css по умолчанию, но в апплете необходимо использовать файл .wxss, поэтому просто установите суффикс выходного файла.

  1. Перезапустите инструменты разработчика WeChat.

После успешной настройки закройте апплет и откройте его, а затем найдите страницу в каталоге pages, чтобы создать новую.index.less, напишите немного CSS и сохраните егоindex.wxss, ничего не изменилось...

окончательный эффект

Ссылаться на: