嘿，我完全懂你遇到的这个麻烦——既要根据不同环境加载对应的远程CSS，还得把它打包进应用里，不能依赖那个没法修改的共享模板。刚好你已经在用vite-plugin-css-injected-by-js处理本地样式，那咱们就基于这个插件来解决远程CSS的问题，给你两个实用方案：

方案一：利用环境变量+JS动态导入（简单快捷） #

这种方式不用额外写插件，靠Vite的环境变量和动态导入就能搞定：

1. 配置环境变量
   在项目根目录创建对应环境的.env文件：

• 开发环境.env.development：

VITE_REMOTE_CSS_URL=https://dev.mysite.com/v/1.2.3/style.css

• 生产环境.env.production：

VITE_REMOTE_CSS_URL=https://prod.mysite.com/v/1.2.3/style.css

（注意变量名必须以VITE_开头，Vite才会自动把它暴露给客户端代码）

2. 在入口文件动态导入远程CSS
   修改main.js，通过动态导入加载对应环境的CSS，这样vite-plugin-css-injected-by-js会自动把它打包进最终的JS文件：

import { createApp } from 'vue'
import App from './App.vue'

// 根据环境变量加载远程CSS
import(import.meta.env.VITE_REMOTE_CSS_URL).catch(err => {
  console.error('加载远程CSS失败:', err)
})

createApp(App).mount('#app')

方案二：下载远程CSS到本地再打包（更稳定） #

如果远程CSS的加载存在跨域风险，或者你希望构建时就把CSS内容打包进去，那可以写个简单的Vite插件先把远程CSS下载到本地，再像本地样式一样导入：

1. 配置环境变量
   和方案一一样，先在.env文件里定义好不同环境的CSS URL。

2. 修改Vite配置，添加下载插件
   在vite.config.js里加入一个自定义插件，在开发/构建前自动下载对应环境的CSS：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import fs from 'fs'
import https from 'https'

export default defineConfig(({ mode }) => {
  // 获取当前环境对应的CSS URL
  const cssUrl = process.env[`VITE_REMOTE_CSS_URL_${mode.toUpperCase()}`] || process.env.VITE_REMOTE_CSS_URL

  // 封装下载CSS的函数
  const downloadRemoteCss = () => {
    return new Promise((resolve, reject) => {
      https.get(cssUrl, (res) => {
        let cssContent = ''
        res.on('data', chunk => cssContent += chunk)
        res.on('end', () => {
          // 把CSS内容写入本地文件
          fs.writeFileSync('./src/assets/remote-style.css', cssContent)
          resolve()
        })
      }).on('error', (err) => {
        console.error('下载远程CSS出错:', err)
        reject(err)
      })
    })
  }

  return {
    plugins: [
      vue(),
      cssInjectedByJsPlugin(),
      // 自定义下载插件
      {
        name: 'download-remote-css',
        async buildStart() {
          await downloadRemoteCss()
        },
        async devStart() {
          await downloadRemoteCss()
        }
      }
    ]
  }
})

3. 在App.vue中导入本地的CSS文件
   现在就可以像导入本地样式一样引入下载好的CSS，插件会自动把它打包进JS：

<style>
@import './assets/remote-style.css';
/* 你的本地应用样式 */
</style>

注意事项 #

• 要是远程CSS有版本更新，记得同步修改.env文件里的URL版本号
• 方案二的下载插件可以根据需求扩展，比如添加缓存逻辑，避免每次启动都重新下载
• 确保你的网络环境能正常访问远程CSS地址，不然下载会失败

备注：内容来源于stack exchange，提问作者SelAromDotNet