多个顺风CSS配置

Question

我正在使用Laravel/Inertia/Vue构建一个项目，我正在使用顺风CSS。我想有单独的admin.css和客户端.css文件使用tailwindcss 3.2能力有多个配置文件:

./styles/admin.css

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

但是问题是Vite只会为我构建app.css而不是admin那个

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
ssr: 'resources/js/ssr.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
ssr: {
noExternal: ['@inertiajs/server'],
},
server: {
host: "localhost",
},
});

app.css被导入到app.js

我想不明白
你能帮我吗?

我想有单独的admin.css和client.css文件每个tailwindcss配置文件。

Answer 1

您可以像下面这样传递一个输入文件数组给vite:

input: ['resources/js/app.js','resources/css/admin.css','resources/css/client.css']

这将导致在构建目录中有单独的输出文件。

如果你想让css作为javascript导入，你可以为管理区域创建第二个InertiaApp:

1. 复制app.js并重命名为admin.js
2. 将admin.js中的css导入更改为'/styles/admin.css'
3. 将您的访问输入更改为:input: ['resources/js/app.js','resources/js/admin.js']
4. 使用不同的刀片布局的'admin'区域参考admin.js而不是app.js:@vite('resources/js/admin.js')