使用导入的自定义 SCSS 组件编译 Tailwind CSS答案

【问题标题】：Compile Tailwind CSS with imported custom SCSS components使用导入的自定义 SCSS 组件编译 Tailwind CSS
【发布时间】：2020-10-08 11:51:54
【问题描述】：

我有一个使用 Vue CLI 4 创建的正在运行的 Vue 应用程序，并且还在 this tutorial 的帮助下安装了 Tailwind CSS。由于我想将我的自定义组件放入单个文件并在 SCSS 中编写它们，所以我的 tailwind 配置文件看起来像

// tailwind.scss
@tailwind base;
@tailwind components;
@import '@/assets/scss/components/button.scss';
@tailwind utilities;

虽然使用vue-cli-service serve 为应用程序提供服务或使用vue-cli-service build 构建它效果很好，但我缺少用于所有顺风类的 IntelliJ IDEA 的自动完成功能，因此我不必使用（即使很难）像this这样的备忘单。

我的想法是引入一个 npm 脚本来构建完整的tailwind.css，以便 IDE 在自动完成 css 类时可以使用它。我知道我可以使用npx tailwindcss build tailwind.scss -o tailwind.css 手动构建这样的文件。

然而，虽然这给了我内置顺风类的自动补全功能，但它当然既不会在我的自定义组件中编译 SCSS，也根本不会解析 @import。解决方案可能是 1) 解析 @import，2) 将 SCSS 编译为 CSS，3) 使用上述 tailwindcss build 最终构建完整的 tailwind.css。

由于我对 Webpack 非常缺乏经验，我想知道您是否可以给我一些关于如何实现这一点的提示。你甚至会使用 Webpack 来完成这项任务吗？

【问题讨论】：

标签： vue.js webpack sass tailwind-css

【解决方案1】：

Webpack 绝对是这里的必经之路，我一直使用这个配置。请参阅 setup documentation with webpack 的 Tailwind 文档页面

不用担心 Tailwind 的自动完成功能，您将很快学会这些课程，而且它们的文档和搜索功能非常出色，恕我直言，无需外部备忘单。

【讨论】：

【解决方案2】：

如果您使用post-cssimport，则需要将@import 语句放在其他所有内容之前。查看https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

【讨论】：