Laravel vite 配置使用单独的 tailwind.config 文件用于管理和站点

Question

使用 Laravel Mix，我为管理员和主站点生成两个不同的 css/js 文件，如下所示：

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

mix.js('resources/js/site/app.js', 'public/js')
  .postCss('resources/css/site/app.css', 'public/css', [
    require('autoprefixer'),
    require('postcss-import'),
    tailwindcss('./tailwind.site.config.js'),
  ])
  .options({
    processCssUrls: false,
  }).version();

mix.js('resources/js/admin/app.js', 'public/_admin/js')
  .postCss('resources/css/admin/app.css', 'public/_admin/css', [
    require('autoprefixer'),
    require('postcss-import'),
    tailwindcss('./tailwind.admin.config.js'),
  ])
  .options({
    processCssUrls: false,
  }).version();

我怎样才能告诉vite做同样的事情??

谢谢！！

默认

vite.config.js

是

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: [
        ...refreshPaths,
        'app/Http/Livewire/**',
      ],
    }),
  ],
});

Answer 1

参见 https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html。

您需要向 config/vite.php 添加配置，创建一个新的 vite.back-office.config.ts 文件，将配置名称传递给 @vite 指令，并运行略有不同的开发和构建命令。

这些文档以 TypeScript 为中心，但同样的技术也适用于您的 JS/CSS 资产。

Answer 2

创建两个vite.config.js文件，并为前端和后端创建两个tailwind.config.js文件。

我已经通过演示 laravel 项目在 github 上发布了此解决方案。

https://github.com/pkfan/setup-laravel-vite-for-multiple-tailwind.config.js

我已经上传了有关它的视频。 在 youtube 上观看此视频

Answer 3

从 Tailwind CSS v3.2 开始，不再需要 hacky 解决方法。 您现在可以定义要在 CSS 文件中使用的配置文件：

/* Styles for admin */
@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Styles for client (main site) */
@config "./tailwind.client.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config