less全局引入和配置使用

前言:

sass和less都是css的拓展语言，less和sass最主要的区别是less是通过Javascript编译，而sass是通过ruby编译的，如果没有引入前端工程化，less会消耗客户端性能，sass会消耗服务端性能，但是引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别

一. 安装less插件

安装less

npm i less-loader
或
npm install less-loader --save-dev
或
npm install -D less-loader less

安装style-resources-loader

方法1：分开安装

安装style-resources-loader
npm i style-resources-loader

安装vue-cli-plugin-style-resources-loader
npm i vue-cli-plugin-style-resources-loader

方法二：直接使用vue add style-resources-loader安装

vue add style-resources-loader
安装完成后会让你自行选择预处理器，本文使用less预处理器

vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果安装失败的话，就采用方法一

二.在vue.config.js中配置

首先在style文件下创建mixin.less文件，然后在module.exports中配置这段，引入创建的mixin.less

pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/styles/mixin.less")]
    }
  }

三.在vue中使用

/* 全局less公用变量，和less全局mixin函数
变量使用方法:color: @color-red;
mixin使用方法:
无参数直接调用 .mixin-flex-center()
有参数: .mixin-flex(center;center;column);
*/
/* 全局color变量 */
@color-red:red;
@color--primary: var(--theme-color, red) ;

/* mixin混入 */
// flex布局
.mixin-flex(@align: normal, @justify: normal, @direction: row) {
    display: flex;
    flex-direction: @direction;
    align-items: @align;
    justify-content: @justify;
  }
// flex居中布局
.mixin-flex-center() {
    display: flex;
    align-items: center;
    justify-content: center;
  }
// 定位居中布局
.mixin-position-center() {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
// 文字超出隐藏
.mixin-no-wrap() {
    overflow: hidden; /* 超出部分隐藏 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 超出部分文字以...显示 */
}