Aprende a configurar global less en Vue2 vue.config.js y Vue3 Vite

prefacio

Hola a todos, soyxiao zhang, Hace mucho tiempo que no actualizo el blog. Encontré un problema cuando escribí la demostración hace dos días. Lo compartiré con ustedes aquí. Si lo encuentra útil, haga clic en Star.

Al usar less o sass, esperamos que las variables se puedan usar globalmente, en lugar de importarlas cada vez que se usan, lo que sería muy problemático.Este artículo es para mostrarle cómo registrar menos variables como globales.

Modos que no están registrados globalmente

Este modo nos hará muy engorroso introducir menos ( 见下方代码) cada vez que lo usamos, necesitamos introducirlo.

<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>
复制代码

Modo de registro global

No es necesario volver a presentarlo.

<style lang="less" scoped>

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

Luego configuraremos el global en el archivo Vue.config.js less.

Creo que si te encuentras con este problema, deberías haberlo descargado. lessSi no, entonces...

1: Descargar menos

yarn add less 或 npm install less
复制代码

2: Descargar less-loader, aquí descargamos la versión 7. Si la versión es demasiado alta, habrá problemas de configuración.

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

2: A continuación, tenemos que descargar style-resources-loaderyvue-cli-plugin-style-resources-loader

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

Si has realizado correctamente los dos pasos anteriores, enhorabuena, aún te falta el último paso, ve vue.config.jsa la configuración.

  /*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>
复制代码

————> Reinicia tu proyecto actual y úsalo donde necesites usar propiedades globales después de completarlo.

(Probablemente el efecto sea el anterior).

3: Por supuesto, este es el Vue2proyecto que he preparado aquí Vue3+Vite(ver más abajo)

Configurar menos global en Vue3+Vite

En primer lugar, también debe descargar el paquete básico de terceros.

1: Descargar menos

yarn add less 或 npm install less
复制代码

2: Necesitamos configurarlo en Vite.config.ts. Por supuesto, debe configurar el símbolo @ usted mismo. Si no sabe cómo configurarlo, necesita Baidu.

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: solo necesita agregar a continuación核心代码

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

A continuación, reinicie el proyecto. Si lo encuentra útil, por favor, dale me gusta, gracias.