时间戳

首页 > 解决方案 > Vuejs .vue 文件：动态少导入

css - Vuejs .vue 文件：动态少导入

问题描述

我有一个由几个标准.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（并将其设置为“green-theme”、“vintage-theme”、“default-theme”等字符串），我如何动态导入和应用适当的less文件放入文件的<style>一部分.vue？例如，用户选择“绿色主题”，我想将默认导入文件切换@import "assets/constants";到@import "assets/constants-green";例如@color-ui-text;设置为深绿色而不是标准黑色的位置。

标签： cssvue.jswebpackless

解决方案

如果你使用 vue cli，你可以使用这样的东西：

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

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

注意：我在示例中使用 sass

更多关于这个你可以在这里找到： loaderoptions

推荐阅读