Tailwind 不适用于带有 Sass 的 vue 4.3.1

Posted 2023-03-06

【中文标题】Tailwind 不适用于带有 Sass 的 vue 4.3.1

【英文标题】：Tailwind dosen't work on vue 4.3.1 with Sass

【发布时间】：2020-10-25 21:20:07

【问题描述】：

我正在尝试将顺风添加到 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

并出现以下消息

无法解析加载器：sass-loader 您可能需要安装它。

安装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

再次运行服务器，但视图看起来没有顺风 css。

有没有办法用 sass 和 vue4 正确安装顺风？

谢谢

【问题讨论】：

我重启了我的服务器

【参考方案1】：

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

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

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

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