Проблемы с моим файлом main.css в проекте Tailwind и Vuejs - PullRequest
0 голосов
/ 17 мая 2018

Попытка настроить проект Vuejs с помощью веб-пакета, который включает TailwindCSS. Я следовал инструкциям из поста Джерри в блоге (https://www.jerriepelser.com/blog/using-tailwindcss-with-vuejs/), а также примера Адама на github (https://github.com/adamwathan/vue-cli-tailwind-example).), но продолжаю сталкиваться с проблемой, когда дело доходит до создания файла main.css.

Мои шаги:

1.) Создание проекта Vue -

vue init webpack tailwind-test

2.) Затем я запускаю установку NPM -

npm install

С моим Vue Project я пытался добавить Tailwind с некоторыми трудностями.

3.) Установить Tailwind NPM -

npm install tailwindcss --save-dev

4.) Затем добавьте мой конфигурационный файл -

./node_modules/.bin/tailwind init tailwind.js

Здесь у меня проблемы ...

5.) Создание файла CSS -

cd src 
cd assets
mkdir styles 
touch main.css

6.) Затем я ввожу свой файл main.css и добавляю -

@tailwind preflight; 
@tailwind utilities;

Отсюда мой текстовый редактор возвращает ошибку «неизвестное правило», из-за которой я не могу обновить последние штрихи в моем файле .postcssrc.js.

Любой отзыв будет очень признателен!

Спасибо
-MB

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Я рекомендую установить поддержку языка postCSS и переименовать .css в .pcss, затем изменить ссылки в ваших скриптах package.json (или любых других сборочных скриптах, которые вы используете для попутного ветра) с .css на .pcss, и все должно работать нормально..

@ применить правило также совместимо с postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

0 голосов
/ 17 мая 2018

Как вы включаете main.css в свой проект?

Кроме того, поскольку шаблон веб-пакета vue использует PostCSS, вам, скорее всего, следует поступить так, как предлагает документация.

@import "tailwindcss/preflight";
@import "tailwindcss/utilities";

Хотя @tailwind все еще должно работать.

...