学会 Vue2 vue.config.js 和 Vue3 Vite 中配置全局less

前言

大家好，我是小张同学，很久没更新博客了，前两天自己写demo的遇到了一个问题，在这里也跟大家分享一下，如果你觉得有用请点个 Star 。

我们在使用less 或者 sass 时希望全局都能够使用变量 ，而不是每次哪里使用哪里就导入，这样会非常的麻烦，那本篇文章就是给大家带来如何将less变量作为全局注册。

非全局注册的模式

该模式会让我们less 引入非常的繁琐(见下方代码) 每次使用都需要引入。

<style lang='less' scoped>
@import '../../styles/variable.less';
.Home {
  background-color: #fff;
  min-width: 350px;
  .icon-gengduo,
  .icon-wode {
    color: #fff;
  }
  .Home-Text {
    font-size: 14px;
  }
  .base-header {
    position: fixed;
    z-index: 2;
    background-color: @primary;
  }
</style>
复制代码

全局注册模式

就不需要再引入啦。

<style lang="less" scoped>

    span {
      color: @primary;
      font-size: 25px;
    }
</style>
复制代码

那接下来我们就在Vue.config.js文件中配置一下全局的less。

相信遇到这个问题的你 应该已经下载了 less 如果没有那 ...

1：下载less

yarn add less 或 npm install less
复制代码

2：下载less-loader，这里我们下载7的版本，版本太高会出现配置问题。

npm install less-loader@7.x --save-dev
yarn add less-loader@7.x --save-dev
复制代码

2：接下来我们需要下载style-resources-loader 和 vue-cli-plugin-style-resources-loader

 npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev
复制代码

如果你以上两步都正确进行了 ，那恭喜你 还差最后一步 ,去vue.config.js 中配置 。

  /*const ImportLessFile = (Path) => path.resolve(__dirname, Path)
  // 根路径
  const BASELESSFIlEPATH = './src/styles'*/
  
  // 你可以从这里开始ctrl + C 做一个合格的CV工程师
  
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 全局less变量存储路径 -- > 当然 这里的 ImportLessFile 是我封装的方法 
        //ImportLessFile(`${BASELESSFIlEPATH}/variable.less`),
        //ImportLessFile(`${BASELESSFIlEPATH}/mxins.less`)
       // 你可以
       path.resolve(__dirname, 'less样式文件的路径（需要设置全局属性的文件路径）')
      ]
    }
  }
复制代码

<style lang='less' scoped>
.Goods-Column{
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: @primary;
    font-size: 30px;
    background-color: #f9f9f9;
  }
</style>
复制代码

—————> 重启你当前的项目，完成后即可在你需要使用全局属性的地方进行使用就行啦

扫描二维码关注公众号，回复： 14500752 查看本文章

（大概效果就是上方这样了） 。

3:当然这是 Vue2项目的的 我这里还准备了 Vue3+Vite 的（请见下方）

Vue3+Vite 中配置全局的 less

首先你也是需要下再基本的第三方包的

1：下载less

yarn add less 或 npm install less
复制代码

2：我们需要在Vite.config.ts 中配置 当然 @符号你需要自己配置 ，如果不知道怎么配那你需要百度一下。

PreView all config （预览我的所有配置）

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
const path = require('path')
const rootPath = path.resolve(__dirname,'./src')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(
    {
      // 设置属性为 响应式的
      reactivityTransform: true
    }
  ), vueSetupExtend()],
  server:{
    host:'www.corho.com',
    port: 8080,
    open:true,
    cors: true, // 允许开发时 ajax 跨域
  },
  resolve:{
    alias:{
      '@': rootPath
    }
  },
  //  `核心代码 `
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
        `
      }
    }
  }
})


复制代码

3：你只需要 添加下方核心代码

 css: {
    preprocessorOptions: {
      less: {
      //你的less文件 地址
        additionalData: `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
        `
      }
    }
  }
复制代码

然后重启项目就可以啦，如果你觉得有用请点个赞，谢谢。