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

tmb3ates  于 2023-02-05  发布在  其他
关注(0)|答案(3)|浏览(186)

与Laravel混合我生成两个不同的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.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/**',
      ],
    }),
  ],
});
gdx19jrr

gdx19jrr1#

创建两个vite.config.js文件,并为前端和后端创建两个tailwind.config.js文件。
我已经在github上发布了这个解决方案和演示laravel project。
https://github.com/pkfan/setup-laravel-vite-for-multiple-tailwind.config.js
我已经上传了一个关于它的视频。watch this video on youtube

u1ehiz5o

u1ehiz5o2#

参见https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html
您需要在config/vite.php中添加一个配置,创建一个新的vite. back-office. config. ts文件,将配置名称传递给@vite指令,并运行略有不同的开发和构建命令。
这些文档是以TypeScript为中心的,但同样的技术也适用于您的JS/CSS资产。

6kkfgxo0

6kkfgxo03#

从Tailwind CSS v3.2开始,你不再需要那些笨拙的解决方法,你现在可以定义在CSS文件中使用的配置文件了:
https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config

相关问题