昨天在 如何使用tailwindcss来制作皮肤 一文中有写到如何利用 tailwindcss 来制作皮肤，这个当然没有什么难度，但制作皮肤最重要的是什么？那就是即时预览，于是我就想到了vite，为什么不用webpack呢？主要还是由于他太重了！！！！
方法也不算难，而且用了vite后，还可以做一次打包，上篇文章中提到的css无法加版本号的问题也就解决了。
OK，让我们开始进行尝试吧
# 引入 postcss是为了处理类似引用文章中提到的npx tailwindcss -i in -o out --watch
yarn add -D vite tailwindcss postcss autoprefixer
# 生成相应的tailwindcss的config文件，这里就不再多说了
# 生成相应的vite.config.js
这里比较复杂的或者有难度的其实就是这个vite.config.js以及在代码里如何配置，可以参考：官方文档之后端集成，
即：
1、增加manifest的配置为true
2、在当前皮肤全局引入的地方加上（这里面是有问题的，我等会单独讲）
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/main.js"></script>
3、写一个php的函数，用于处理manifest中css路径（目前我们假设就只处理Css和JS），代码类似如下：
function manifest($name){
$f = json_decode(file_get_contents(__DIR__.'/dist/manifest.json'),true);
return "dist/".$f[$name]['file'];
}
4、简单的在模板目录下写一个app.js，内容可以就一行，比如：
```javascript
import './style.css' ; //这个就是写了tailwind配置的那个Css文件
下面，我们来详细说说，如果按照官方文档，估计是跑不起来的，我原来踩的坑也就在这里，即那个`main.js`,其实找不到，也无法找到，这就是typecho项目和其他单文件项目的不同之处，后面我找了文档，发现他的入口文件就是main.js的路径，所以，如果我的入口文件是 `usr/themes/xxx/app.js`, 那么，上面的`http://localhost:5173/main.js`就需要改为：`http://localhost:5173/usr/themes/xxx/app.js`，否则将报404错误
最后，附上详细的vite.config.js内容
```javascript
import {resolve} from "path";
import {defineConfig, loadEnv} from "vite";
export default defineConfig(({command, mode}) => {
//如果有这一行，就可以加载根目录下的.env文件，一般可以不用
const env = loadEnv(mode, process.cwd(), "");
return {
base: "/",
build: {
manifest: true,
rollupOptions: {
input: resolve(__dirname, "usr/themes/xxx/app.js"),
// input: {
// main: resolve(__dirname, "usr/themes/xxx/app.js"),
// }
},
outDir: resolve(__dirname, "usr/themes/xxx/dist"),
cssCodeSplit: false,
chunkSizeWarningLimit: 60000,
},
css: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
}
};
});
tips:
- 注意上面的input，有两种写法，默认写法是生成和你的js同名的文件。如果加了entrypoint的入口，就会生成和你entrypoint同名的js文件，这里要记住。
outDir，最好是空目录，因为vite生成的新文件的时候，会优先清除所有的其他文件，我第一次生成在指定目录里的时候把图片什么的都干掉了- 在全局引用的PHP文件里应该要加上 @if($_SERVER['HTTP_HOST']) 来进行判断，这样即使上线也不用改代码啦~（记得把css和JS分开。），比如我用了blade后，就是
<link rel="stylesheet" href="@asset(manifest('style.css'))"/> , so easy !