Question

我有一个Vue应用，该应用由以下几个标准.vue文件组成：

<template>
    <h1>My App</h1>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                cssTheme: 'default-theme'
            };
        }
    }
</script>

<style lang="less">
    @import "assets/constants";

    html, body {
        color: @color-ui-text;
    }
</style>

在我的assets/constants.less文件中，我定义了许多 less 要使用的css变量（颜色，字体等）。

我想为我的应用提供一系列可以动态更改的图形“主题”。

给出我可以从界面读取/设置/更改的变量cssTheme（并将其设置为诸如“绿色主题”，“复古主题”，“默认主题”之类的字符串），如何我是否将适当的 less 文件导入并即时应用到<style>文件的.vue部分中？例如，用户选择“绿色主题”，而我想将默认导入的文件@import "assets/constants";切换为@import "assets/constants-green";，例如，@color-ui-text;设置为深绿色，而不是标准黑色。

Answer 1

如果您使用vue cli，则可以使用类似以下的内容：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "assets/constants";
        `
      }
    }
  }
};

它将在每个sass文件中自动添加@import "assets/constants";

注意：我在示例中使用sass

有关此的更多信息，您可以在这里找到： loaderoptions

VueJS .VUE文件：动态少导入

1 个答案: