vue.js - Tailwind 不适用于带有 Sass 的 vue 4.3.1

Question

我正在尝试将 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？

谢谢

Answer 1

需要将编译好的css文件通过postcss传递出去。 TailwindCSS 是一个 postcss 插件，Sass 不能用它做任何事情。我认为你应该check the docs再次。

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

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

然后在 Vue 中导入 tailwind.css 文件。