在WordPress主题中使用Vite.js HMR处理SCSS遇404问题求助

一、test.css 404的原因 #

1. 路径配置错误：你的vite.config.js中root已设为./resources，但rollupOptions.input却写了./resources/test.scss，这会导致Vite去寻找./resources/resources/test.scss——显然不存在这个文件，因此Vite直接跳过了SCSS的编译，自然访问test.css会返回404。
2. 开发模式下rollupOptions.input不生效：这个配置是针对生产构建的，Vite的开发服务器不会读取该配置，所以即便路径正确，开发模式下也无法通过这个配置让Vite处理SCSS文件。

另外你没收到Sass安装警告，是因为Vite根本没找到要处理的SCSS文件，没触发编译流程，自然不会检测依赖。

二、rollupOptions.input罗列资源是否合适？ #

对于非JS资源（比如SCSS），单独用rollupOptions.input罗列并不合适：

• 开发模式下不生效，无法利用Vite的HMR等特性；
• 生产构建时虽然能编译，但无法自动关联资源依赖，也不利于维护。

三、更优方案：用入口JS统一管理资源 #

因为你不需要完整的前端应用，仅需处理零散的JS/SCSS，最适合的方式是创建一个入口JS文件，通过导入的方式让Vite自动处理所有关联资源，具体步骤如下：

1. 调整目录与文件 #

在resources目录下创建main.js文件，内容如下：

// 导入需要处理的SCSS文件
import './test.scss';
// 如需处理JS文件，同样在这里导入
// import './your-script.js';

2. 修改vite.config.js配置 #

import { defineConfig } from 'vite';

export default defineConfig({
  root: './resources',
  build: {
    // 生产构建的输出目录，建议放在WordPress主题目录下的dist文件夹
    outDir: '../dist',
    rollupOptions: {
      // 入口改为刚才创建的main.js，路径相对root目录
      input: './main.js',
    },
  },
  server: {
    port: 1337,
    // 确保开发服务器的origin正确，避免资源加载跨域
    origin: 'http://127.0.0.1:1337',
  },
});

3. 安装Sass依赖 #

如果还没安装，执行命令安装Sass（Vite处理SCSS需要该依赖）：

npm install sass -D

4. 修改WordPress的资源加载代码 #

不再直接请求CSS，而是加载入口JS：

<script type="module" src="http://127.0.0.1:1337/main.js"></script>

Vite会自动将SCSS编译为CSS，并通过JS注入到页面中，同时支持HMR热更新。

5. 生产构建与部署 #

执行构建命令：

npm run build

构建完成后，dist目录会生成编译好的JS和独立的CSS文件，在WordPress生产环境中直接引用这些文件即可：

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/dist/test.css?ver=6.0.1">
<script src="<?php echo get_template_directory_uri(); ?>/dist/main.js?ver=6.0.1"></script>

内容的提问来源于stack exchange，提问作者Yami