vue2和vue3-Less的自动化导入

最新推荐文章于 2024-02-21 15:18:32 发布

古迪红尘

最新推荐文章于 2024-02-21 15:18:32 发布

阅读量269

点赞数

分类专栏： vue-3 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_57246351/article/details/120492939

版权

vue-3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何通过vue-cli的style-resources-loader插件，实现全局less变量的自动导入，显著减少业务组件的开发工作量。步骤包括配置less变量文件、添加style-resources-loader插件及使用方法。

摘要由CSDN通过智能技术生成

任务目标: 让业务组件自动加入公共样式（全局字体色值）

我们开发的应用有些样式是公用的，比如我们常见的配色色值，为了做到统一修改的目的往往需要定义成less变量，很多的业务组件都需要使用这些变量，如果我们每一个业务组件都手动引入然后使用的话，开发量巨大，所以为了解决这个问题，我们采取自动导入的方式，方便我们业务组件使用全局less变量

1. 手动引入方案

1）准备样式变量文件

src/styles/variables.less

// 主题
@xtxColor:#27BA9B;
// 辅助
@helpColor:#E26237;
// 成功
@sucColor:#1DC779;
// 警告
@warnColor:#FFB302;
// 价格
@priceColor:#CF4444;

2）手动引入使用其中的变量
在app.vue文件中进行简单测试

<template>
  <!-- 一级路由出口 -->
  <router-view />
  <div class="test">我是测试文字</div>
</template>

<style lang="less" scoped>
// 引入我们定义了less变化的文件
// ~线不能丢
@import "~@/styles/variables.less";
.test {
  color: @xtxColor;
}
</style>

2. 自动引入方案

解决方案：使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中

1）在当前项目下执行一下命令vue add style-resources-loader，添加一个vue-cli的插件
在这里插入图片描述
2）安装完毕后会在vue.config.js中自动添加配置，如下：

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

3）把需要注入的文件配置一下后，重启服务即可

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 配置哪些文件需要自动导入
        path.join(__dirname, './src/styles/variables.less')
      ]
    }
  }
}