时间戳

首页 > 解决方案 > VueJS：动态更改 SCSS 变量颜色或动态导入 scss 文件

vue.js - VueJS：动态更改 SCSS 变量颜色或动态导入 scss 文件

问题描述

我有像 xyz.in/ab、xyz.in/bc 等子域，它们在单个服务器中运行。我需要为不同的域配置不同的样式。所以我需要动态更改主要、次要、..etc 颜色。

ab.scss

$primary: white, 
$secondary: grey

bc.scss

$primary: red, 
$secondary: light-grey

我需要根据 URL 动态配置不同的文件（注意：我需要在运行时动态更改文件）。我怎样才能做到这一点？

标签： vue.jssassscss-mixins

解决方案

如果 url 是xyz.in/ab，那么this.$route.path应该给你/ab。然后您可以尝试 ES6 动态导入来解决您的问题，如下所示：

mounted() {
    /* figure out the scss file name according to url */
    const fileName = this.$route.path === '/ab' ? 'one.scss' : 'two.scss';

    /* import file dynamically (assuming scss files are in assets/scss folder) */
    import("@/assets/scss/" + fileName);
}

让我知道它是否对您有用。

推荐阅读