css - Vuejs.vue 文件 : dynamic less import

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文件我已经定义了许多 css 变量供 less 使用(颜色、字体等)。

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

给定变量 cssTheme我可以从界面读取/设置/更改(并将其设置为字符串，如“green-theme”、“vintage-theme”、“default-theme”)，我如何即时导入和应用适当的 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