CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

// ベース.less
：根 {
  --プライマリ: 緑;
  --警告: 黄色;
  --情報: 白;
  --危険: 赤;
}

// var.less
@プライマリ: var(--プライマリ)
@危険: var(--危険)
@info: var(--info)

// ページなし
.ヘッダー{
  背景色: @primary;
  色: @info;
}
。コンテンツ {
  境界線: 1px 実線 @danger;
}

//変更.js
関数 changeTheme(themeObj) {
  const vars = Object.keys(themeObj).map(key => `--${key}:${themeObj[key]}`).join(';')
  document.documentElement.setAttribute('style', vars)
}

//ストア/テーマ.js
'css-vars-ponyfill' から cssVars をインポートします

エクスポートデフォルト{
  州： {
    「プライマリ」：「緑」、
    「危険」：「白」
  },
  突然変異:
    UPDATE_THEME(状態、ペイロード) {
      定数変数 = {}
      オブジェクト.assign(状態、ペイロード)
      Object.keys(state).forEach((キー) => {
        変数[`--${key}`] = 状態[key]
      })
      cssVars({
        変数
      })
    }
  },
  アクション: {
    テーマを変更する({コミット}, テーマ = {}) {
      コミット('UPDATE_THEME', テーマ)
    }
  }
}

// ルータ.js
// ルートジャンプ後のページでは、必要に応じて新しい CSS リソースが読み込まれるため、再変換します。const convertedPages = new Set()
router.afterEach((to) => {
  if (convertedPages.has(to.path)) 戻り値
  変換されたページをパスに追加します
  context.store.dispatch('theme/changeTheme')
})

@_primary: 赤
@プライマリ: var(--プライマリ)

：根{
  --プライマリ: @_プライマリ
}

。テーマ {
  色: @primary;
}

//.themeに変更{
  色: @_primary;
  色: @primary;
}

// プラグイン.js
デフォルトクラス HackCss をエクスポートします。
  コンストラクタ (テーマ = {}) {
    this.themeVars = テーマ
  }

  適用(コンパイラ) {
        コンパイラー.フック.thisCompilation.tap('HackCss', (コンパイル) => {
          コンパイル.フック.normalModuleLoader.tap(
            「ハックCSS」、
            (_, モジュールコンテキスト) => {
              /\.vue\?vue&type=style/.test(moduleContext.userRequest) の場合 {
                // ssr プロジェクトの同型性には 2 つのコンパイラがあります。モジュールにローダーがある場合は追加されません if (hasLoader(moduleContext.loaders, 'hackcss-loader.js')) {
                  戻る
                }

                lessLoaderIndex = 0 とします
                // プロジェクトでは less を使用しているため、less-loader の場所を見つけます。moduleContext.loaders.forEach((loader, index) => {
                  (/less-loader/.test(loader.loader)) の場合 {
                    lessLoaderIndex = インデックス
                  }
                })
  
                moduleContext.loaders.splice(lessLoaderIndex, 0, {
                  ローダー: path.resolve(__dirname, 'hackcss-loader.js'),
                  オプション: this.themeVars
                })
              }
            }
          ）
        })
      }
    })
}

// ローダー.js
const { getOptions } = require('loader-utils')

module.exports = function(ソース) {
  if (/module\.exports/.test(source)) ソースを返す
  const theme = getOptions(this) || {}
  ソースを返す.replace(
    /\n(.+)?var\(--(.+)?\)(.+)?;/g,
    (コンテンツ、前、名前、後 = '') => {
      const [キー、インデント] = before.split(':')
      定数add = after.split(';')[0]
      `\n${key}:${indent}${theme[name]}${after}${add};${content}` を返します
    }
  ）
}