时间戳

首页 > 解决方案 > Tailwind 不适用于带有 Sass 的 vue 4.3.1

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

问题描述

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

谢谢

标签： vue.jssasstailwind-css

解决方案

您需要通过 postcss 传递编译后的 css 文件。TailwindCSS 是一个 postcss 插件，Sass 不能用它做任何事情。我认为您应该再次检查文档。

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

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

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

推荐阅读