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; /* 超出部分文字以...显示 */
}

版权声明:本文为m0_47918831原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。