webpack - 我在 Tailwind 和 Vuejs 项目中的 main.css 文件存在问题
问题描述
尝试使用包含 TailwindCSS 的 webpack 设置 Vuejs 项目。我一直在遵循 Jerrie 的博客文章 ( 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 install -
npm install
随着我的 Vue 项目设置,我一直在尝试添加 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;
从这里我的文本编辑器返回错误“at-rule unknown”,这阻止我更新对我的 .postcssrc.js 文件进行最后润色。
任何反馈将不胜感激!
谢谢
-MB
解决方案
你是如何参与main.css
到你的项目中的?
此外,由于 vue webpack 模板使用 PostCSS,因此您应该按照文档的建议进行操作。
@import "tailwindcss/preflight";
@import "tailwindcss/utilities";
虽然@tailwind
应该仍然有效。
推荐阅读
- websphere - WASSessionCor W SessionAffinityManager setCookie SESN0066E: 响应已提交给客户机。无法设置会话 cookie
- python-3.x - 在 Mac OS X Catalina 中找不到“/Library/Python/3.7m/include/pyconfig.h”?
- c# - 在 SignalR 聊天应用中上传媒体时断开连接
- python - 带 Telepot 的 Klling 线程
- couchbase - 在 cbrestore 工具的沙发库中找不到 cbb 备份路径
- flutter - Flutter Doctor 代理检测
- postgresql - 为什么在没有查询的情况下记录持续时间?
- r - 将属性(性别)添加到边缘列表中的顶点
- python - 获取 Pandas DataFrame 中列括号之间的文本
- r - 有没有办法根据它们在 R 中的值来选择和按比例排列行?