Как интегрировать Tailwindcss в веб-компонент проекта VUE CLI 3? - PullRequest
Новая
       20

Как интегрировать Tailwindcss в веб-компонент проекта VUE CLI 3?

0 голосов
/ 23 сентября 2018

Вот что у меня есть:

Проект VUE ClI 3 с большим количеством компонентов и всего происходящего.

Что мне нужно:

Это способ повторно использовать этот проект и очень просто разместить его на сайте моего клиента.Я подумываю только о добавлении одного файла JS и, возможно, небольшого фрагмента HTML.

Что я сделал:

Я использовал VUE CLI 3 для экспорта своего проектав качестве веб-компонента.Это прекрасно работает, потому что теперь мне просто нужно использовать один файл JS и созданный мной тег веб-компонента.

Проблема:

Проблема в том, что все, что у меня естьстиль с Tailwindcss в моем проекте не стилизован внутри веб-компонента, поскольку кажется, что эти стили не включены.

Обычно вы бы включали свои стили в каждый компонент Vue.(Я использую отдельные компоненты .vue) Но так как я использую TailwindCSS, я использовал много классов для своих HTML-тегов.Это хорошо работает в моем проекте VUE CLI 3, потому что я использую PostCSS для TailwindCSS.Но он больше не работает, когда я создаю веб-компонент.У меня также нет как выведенный файл CSS.У меня есть только мой файл tailwind.css: 

@tailwind preflight;
@tailwind components;


// my custom styles

@tailwind utilities;

Мой вопрос:

Так, как я могу получить стили TailwindCSS, а также мои собственные стили CSS ввеб-компонент?

1 Ответ

0 голосов
/ 23 сентября 2018

Я уверен, что некоторые из этих шагов будут вам лишними, но я хочу пройти через все из них, чтобы избежать путаницы:

Убедитесь, что вы находитесь в корневой папке вашего проекта:

  1. Установить Tailwind CSS: npm install tailwindcss --save-dev

  2. Создать файл конфигурации Tailwind: ./node_modules/.bin/tailwind init tailwind.js Это создаст файл конфигурации попутного ветра с именем tailwind.jsв корне вашего проекта.

  3. Создайте файл tailwind.css (вы можете дать ему любое имя).Я обычно помещаю этот файл в assets/css/tailwind.css.В этом файле добавьте правила конфигурации, которые вы указали в своем вопросе.Вам не нужно беспокоиться о включении ваших пользовательских стилей CSS в этот файл.

  4. Откройте ваш файл package.json и создайте новый script в разделе скрипта: copyвставьте это: "tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css".

Каждый раз, когда вы запускаете npm run tailwind, попутный ветер будет компилироваться и помещаться в файл CSS с именем output.css. 

"scripts": {
    "tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css",
    "serve": "npm run tailwind && vue-cli-service serve",
    "build": "npm run tailwind && vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"

  },

Если вы хотите добавить свои собственные стили, создайте styles.css (можно использовать любое имя) и поместите этот файл также в assets/css/styles.css

Теперь давайтевключите эти файлы css в наши компоненты:

Откройте файл App.vue.

В разделе стилей импортируйте файлы: 

<style lang="scss">
  @import "./assets/css/output";
  @import "./assets/css/styles";
</style>

Готово.

...