我试图添加顺风到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/资产/样式/tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
将以下行添加到main中。js
import './assets/styles/tailwind.scss'
执行
npm run serve
并显示以下消息
无法解析加载程序:sass加载程序您可能需要安装它。
安装sass加载器
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
再次运行服务器,但是视图看起来没有顺风css。
有什么方法正确安装顺风与sass和vue4?
谢谢
您需要通过POSTSS传递已编译的css文件。TailwindCSS是一个postss插件,Sass不能用它做任何事情。我想你应该再检查一下文件。
基本上创建一个postcss.config.js
文件:
module.exports = {
plugins: [
require('tailwindcss'),
]
}
然后导入您的顺风。Vue中的css
文件。