我正在尝试将 tailwind 添加到 vue 项目,为了做到这一点,我将遵循以下步骤:
vue版本
vue --version
@vue/cli 4.3.1
创建项目
vue create tailwindproject
(node-sass, babel, router, eslint, with dedicated files)
安装顺风
npm install tailwindcss
创建 css 文件:
touch ./src/styles/tailwind.scss
将以下内容复制到./src/assets/styles/tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
将以下行添加到 main.js
import './assets/styles/tailwind.scss'
执行
npm run serve
并出现以下消息
Failed to resolve loader: sass-loader You may need to install it.
安装sass-loader
与
npm install --save sass-loader
并出现以下错误:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Error: Cannot find module 'sass'
我解决了这个问题:
npm install --save-dev node-sass
再次运行服务器,但 View 看起来没有 tailwind css。
有没有办法用 sass 和 vue4 正确安装 tailwind?
谢谢
最佳答案
需要将编译好的css文件通过postcss传递出去。 TailwindCSS 是一个 postcss 插件,Sass 不能用它做任何事情。我认为你应该check the docs再次。
基本上创建一个 postcss.config.js
文件:
module.exports = {
plugins: [
require('tailwindcss'),
]
}
然后在 Vue 中导入 tailwind.css
文件。
关于vue.js - Tailwind 不适用于带有 Sass 的 vue 4.3.1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62744392/