顺风不工作在vue 4.3.1与Sass

Question

我试图添加顺风到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？

谢谢

Answer 1

您需要通过POSTSS传递已编译的css文件。TailwindCSS是一个postss插件，Sass不能用它做任何事情。我想你应该再检查一下文件。

基本上创建一个postcss.config.js文件：

module.exports = {
  plugins: [
    require('tailwindcss'),
  ]
}

然后导入您的顺风。Vue中的css文件。