Автор оригинала: FreeCodeCamp Community Member.
TL; DR: преодолеть NUXT.JS, Bulma и Sass Shenanigans с этой быстрой статьей, чтобы помочь вам начать разрабатывать ваше следующее приложение менее чем за 10 минут.
Привет всем ❤️! Несколько дней назад я обнаружил, что боролся немного, чтобы поставить Nuxt.js , Bulma и Sass Чтобы работать правильно, и информация, которую я нашел в Google, не помогал слишком много.
Большинство конфигураций, которые я обнаружил, не работал, потому что они были устарели или не так хорошо объяснили, как это сделать. Поэтому я немного погрузился на эту тему и решил написать статью, чтобы помочь вам сделать то же самое менее чем за 10 минут.
Давайте повеселим и добиться наших рук, пока Grokking несколько концепций, необходимых для этого.
1. Леса Nuxt.js.
В наши дни, чтобы быстро начать с nuxt.js мы используем инструмент для лесов под названием create-nuxt-приложение Отказ Пожалуйста, убедитесь, что у вас есть NPX Установлен на вашу машину.
Давайте откроем терминал и делаю: NPX Create-Nuxt-App Nuxt-Bulma-Sass , где Nuxt-Bulma-Sass Название проекта мы строились с целью этой статьи.
create-nuxt-приложение Задам вам несколько вопросов, прежде чем создать леса. С целью этой статьи я выбрал следующую настройку:
Таким образом, следующий шаг будет изменять каталог в папку проекта:
CD NUXT-Bulma-Sass
и запустить проект с: пряжа работает dev Отказ (Вы также можете использовать NPM, если вам это нравится)
На данный момент у нас работает наш проект:
И если мы открываем наш браузер на localhost: 3000 мы получим этот экран:
Итак, на данный момент у нас есть страницы/index.vue на экране, которая является первой страницей, которая будет отображаться в вашем проекте по умолчанию.
Давайте заменим содержание этого файла следующим:
Если мы осмотрим нашу страницу в браузере, мы видим, мы получили Bulma установлен, потому что раздел отформатирован в зависимости от него.
Легкая кресться лимона сжимает.
Давайте добавим класс и выбираем несколько цветов:
Что если мы хотим гнездить. Здравствуйте-NUXT внутри . Эдо-тема ? Нам нужно понадобиться, чтобы Sass сможет сделать это.
2. Добавление Sass.
Итак, чтобы добавить SASS в наш проект, нам нужно будет остановить наше приложение для запуска (Ctrl + C) и выполните следующие действия:
пряжа Добавить узел Sass-Loader –dev
Это две пакеты, необходимые в качестве зависимостей DEV-зависимости, чтобы иметь Sass в нашей котельной.
Обратите внимание, что мы добавляем его в качестве зависимости DEV, потому что нам нужно только во время разрабатывания и в состав. После этого Sass превращается в CSS И нам это больше не нужно.
Давайте подкрадываться за мой пакет. Джосон, чтобы проверить это:
Хорошо, все ❤️, на данный момент мы можем закрыться классы, которые мы хотели.
Давайте снова запустим нашу ботиную табличку: пряжа работает dev И нужен настройки?
Тьма! Мы уже сегодня делали много! Иди возьми кофе ☕, я буду ждать тебя здесь?
Хорошо, давайте немного абстрактным и создадим этот файл ~/Активы/SCSS/Main.scss и поставить там несколько классов и переменных:
Хороший! Это работает!
Теперь у нас есть две проблемы:
- Нам нужно импортировать Main.scss в каждый из наших страниц/компонентов, что не приятно. Мы хотим импортировать его только один раз и доступны во всех наших <Стиль> «Сумки»
- Мы не можем использовать переменные SASS Bulma (попробуйте изменить фоновый цвет из класса .edo-тема от $ EDO до $ Primare . Мы хотим иметь переменные Sass Bulma в Чтобы переопределить их и создавать новые темы оттуда.
Так что … что, если мы хотим использовать Bulma Sass переменные ?
3. Здесь приходит тяжелая часть, которая отвезла меня некоторое время, чтобы понять.
Bulma импортируется в эвакуировку Create-Nuxt-App. Когда вы делаете пряжа работает dev Там это скрыто. nuxt папка в ваш Nuxt-Bulma-Sass папка.
Если вы посмотрите на App.js там:
Вы увидите, что Bulma импортируется из узлов-модулей при запуске среды Dev.
Итак, импортируя Bulma при запуске леса NUXT.JS не в порядке, если мы хотим переопределить переменные SASS Bulma.
Не отчаивайте, вам не нужно бросать свой проект. Шоу должно продолжаться ?
4. Использование Bulma правильно?
Как мы получаем Bulma в нашу котельной, как нам нужно?
Давайте начнем, комментируя @ Nuxtjs/Bulma из nuxt.config.js Секция модулей (держите его на пакете .json потому что то, что он делает, есть установить Bulma, это было бы то же самое, AFAIK, как делать пряжа Добавить Bulma ).
Остановите свою рабочую среду и сделайте пряжа работает dev очередной раз.
Если вы взгляните на ./nuxt/app Вы увидите, что он больше не импортирует Булма.
Итак, теперь, что нам нужно сделать, это перейти к нашему файлу Main.scss и импортировать его в последнюю строку файла.
Я также импортировал Bulma/Sass/Utilities/_All.sass Для нас, чтобы провести переменные SASS с цветами там.
Конечно позже вы можете улучшить его, только импортируя именно то, что вам нужно. Но это еще одна история для другой статьи?
Что ж, проверьте свой браузер и посмотрите на него работает.
5. Да! Это работает, детка!
Теперь последняя проблема! Мы не хотим импортировать его в наше <стиль> эшафот каждый раз, когда мы хотим использовать его. Мы хотим, чтобы это было доступно в качестве глобального в любом месте котельной.
Решение для этого – импортировать пакет под названием @ nuxtjs/Стиль-ресурсы Отказ
Этот пакет позволяет обмениваться переменными, Mixins, функционировать во всех файлах. Больше не требуется больше импорта в теге