Vue CLI 5如何生成明暗主题独立CSS文件并注入HTML？

1. 生成两个独立CSS文件的步骤 #

第一步：准备主题SCSS文件及变量 #

在项目的src/styles目录下创建以下文件：

• _variables-light.scss：定义亮色主题的Bulma变量

  // 示例亮色变量
  $primary: #00d1b2;
  $background: #ffffff;
  $text: #363636;
  // 其他Bulma变量按需覆盖
  

• _variables-dark.scss：定义暗色主题的Bulma变量

  // 示例暗色变量
  $primary: #48c774;
  $background: #121212;
  $text: #f5f5f5;
  // 其他Bulma变量按需覆盖
  

• light-mode.scss：亮色主题入口文件

  // 若要支持同时注入无冲突，可嵌套在类选择器内
  body.light-mode {
    @import './_variables-light.scss';
    @import 'bulma';
  }
  // 若不需要同时注入，直接写：
  // @import './_variables-light.scss';
  // @import 'bulma';
  

• dark-mode.scss：暗色主题入口文件

  // 对应亮色的嵌套方式
  body.dark-mode {
    @import './_variables-dark.scss';
    @import 'bulma';
  }
  // 不需要同时注入的写法：
  // @import './_variables-dark.scss';
  // @import 'bulma';
  

第二步：修改Vue CLI配置文件 #

在项目根目录的vue.config.js中配置多入口，让Webpack单独打包这两个SCSS文件：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: config => {
    // 添加亮色主题入口
    config.entry('light-mode').add('./src/styles/light-mode.scss')
    // 添加暗色主题入口
    config.entry('dark-mode').add('./src/styles/dark-mode.scss')

    // 配置CSS输出路径及文件名（可选，默认会输出到dist/css下）
    config.plugin('extract-css').tap(args => {
      args[0].filename = 'css/[name].css'
      args[0].chunkFilename = 'css/[name].css'
      return args
    })
  },
  // 保留你原有的其他配置（如devServer等）
})

执行npm run build后，dist/css目录下会生成light-mode.css和dark-mode.css两个独立文件。

2. 是否可同时注入HTML？ #

可以，但需注意避免样式冲突：

• 若你在SCSS文件中已将主题样式嵌套在body.light-mode和body.dark-mode类下（如第一步的嵌套写法），则两个CSS文件可同时注入HTML中。此时只需通过JS切换body的类名（如document.body.classList.toggle('dark-mode')）即可切换主题，样式不会冲突。
• 若未做类嵌套，同时注入会导致后加载的CSS覆盖先加载的样式，这种情况下不建议同时注入。可通过JS动态加载/替换主题CSS：

  // 示例：切换暗色主题
  function switchToDarkMode() {
    const existingLink = document.querySelector('link[rel="stylesheet"][href*="light-mode"]')
    if (existingLink) {
      existingLink.href = '/css/dark-mode.css'
    } else {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = '/css/dark-mode.css'
      document.head.appendChild(link)
    }
  }
  

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