Laravel 10 + Vite 连接到 Sass Tailwind

本文提供了一种简单的方法，您可以使用 PowerShell 命令轻松连接 Laravel 9、10 框架的 Tailwind CSS 样式表。

警告！ 此团队列表截至 2024 年 2 月为最新版本。在撰写本文时，正在使用以下版本：

• 视频5.1.3
• Laravel 框架 10.45.1
• 节点-v20.9.0

Laravel 从版本 9 开始使用 Vite 构建器，并且它反过来提供了对预处理器的内置支持

• .scss
• .sass
• .更少
• .styl
• .stylus

下面描述了一个简单的操作序列。

1. 通过命令行，我们安装预处理器，在本例中我们选择“sass”，尽管如果需要，也可以使用“less”和“stylus”。 团队可以在官网页面找到 vitejs.dev/guide/features.html#css-预处理器
2. 新建一个文件夹，在里面新建一个文件 'resources/scss/app.scss' - 必须在文件中添加新行 vite.config.js
3. 编写安装命令
4. 在欢迎页面上，您可以删除页面正文标记内的所有内容以及样式线 主体、风格 标签中的下一个 头 您需要输入连接字符串
5. 现在，在欢迎文件的正文中，我们可以编写内容并设置块类。 类的描述记录在文件中 'resources/scss/app.scss' 但是，为了让样式显示在页面上，必须指定启动命令
6. 在另一个命令行选项卡中，启动框架服务器并点击链接
7. 在官方页面上 tailwindcss.com/docs/guides/laravel 我们找到用于安装样式库的命令。 但在下载它们之前，您需要暂停服务器。 请注意，在文件中 package.json 已形成具有指定名称的新依赖关系
8. 创建一个新文件 postcss.config.js
9. 我们的项目中出现了两个配置文件。 在官网同一页面我们找到需要添加到文件中的代码 tailwind.config.js
10. 需要对文件进行更改 resources\css\app.css。 在官方网站的同一页面上，我们找到一个添加到指定地址的列表。 请注意，此条目可以保留在文件顶部 resources\scss\app.scss
11. 修改完成后，再次运行vite编译器

export default defineConfig({
     plugins: [ 
          laravel({ 
               input: [
                   'resources/css/app.css',
                   'resources/js/app.js',
                   'resources/scss/app.scss'
                   ], 
     refresh: true,
          }),
     ],
}); 

Ctrl + C

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ], //add this lines
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;