在WordPress主题中使用Vite.js HMR和SCSS

Question

我试图在WordPress主题中使用Vite.js来处理我的资产文件。

我已经创建了一个vite.config.js文件:

import { defineConfig } from 'vite';
export default defineConfig({
root: './resources',
build: {
rollupOptions: {
input: ['./resources/test.scss'],
},
},
server: {
port: 1337,
},
});

我正在加载Vite.js客户端和来自服务器的资源:

<script type="module" src="http://127.0.0.1:1337/@vite/client"></script>
<link rel="stylesheet" href="http://127.0.0.1:1337/test.css?ver=6.0.1">

但是这会导致test.css文件出现404错误。当使用css/js文件而不是scss时，包括HMR在内的所有内容都可以正常工作。我也没有得到任何关于需要安装sass的警告，所以我假设Vite.js出于某种原因完全跳过了sass文件。

使用rollupOptions是一个好主意吗?首先列出资源的输入选项还是有更好的方法?因为我不是在构建JS应用程序，所以没有index.html这样的入口点，只有一些我想要处理的JS/scss文件。

Answer 1

需要安装SASSnpm add -D sasshttps://vitejs.dev/guide/features.html#css-pre-processors.

输入文件是一个JavaScript文件input: 'main.js'，它本身导入了SCSS文件import './resources/test.scss';。

一般来说，后端集成指南将帮助你设置一个多页面的应用程序，如WordPress https://vitejs.dev/guide/backend-integration.html。