Vuejs .vue 文件：动态少导入

Posted 2023-02-22

【中文标题】Vuejs .vue 文件：动态少导入

【英文标题】：Vuejs .vue file: dynamic less import

【发布时间】：2019-08-03 23:18:07

【问题描述】：

我有一个 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 文件动态应用到.vue 文件的<style> 部分？例如，用户选择“绿色主题”，我想将默认导入文件 @import "assets/constants"; 切换为 @import "assets/constants-green";，例如，@color-ui-text; 设置为深绿色而不是标准黑色。

【问题讨论】：

我不知道您的要求是否可行，因为 less 在您构建时被捆绑并转译为 css，因此您在运行时无法控制它。实现相同结果的一种简单方法是根据设置的主题在应用程序/组件的根元素上设置不同的类，并针对这些选择器编写特定于主题的规则。

【参考方案1】：

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

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

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

注意：我在示例中使用 sass

您可以在此处找到有关此内容的更多信息： loaderoptions

【讨论】：

对不起，我不明白这如何使导入的资产在运行时可选择

在运行时（生产环境）不能使用less/sass，所以你需要创建不同的构建来使用不同的变量。对于运行时，我认为您只有一种方法：css 变量，但不是针对您的目标浏览器。 caniuse.com/#search=css%20var