less合集（一）：less设置全局样式----mixin&自定义样式&初始化vant组件

一：新建样式文件

文件目录可自定义：我的demo如下图；
styles文件夹主要用于对于样式的全局设置；
各大文件功能：
index.less只要用于对文件的引入
vant-reset.less:用于初始化vant样式；
var.less用于定义样式；
mixin.less用于将重复代码定义函数
reset.less用于初始化样式，例如p i标签等等

index.less文件中

@import './vant-reset';
@import './var';
@import './mixin';
@import './reset';

var.less文件中

// 主题颜色---例如按钮等等
@theme-color-light: #fff;
@theme-color-dark: #e8e8e8;
// 按钮颜色
@button-color: #eb0029;
@button-color-disabled: #fabfc9;
// 边距设置
@padding-large: 32px;
@padding-middle: 24px;
@padding-small: 16px;
@padding-mini: 8px;

mixin.less文件中

// 单行省略号显示
.ellipsis() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//多行超出省略号
/*
*lineNum: 参数，行数
*/
.ellipsisLine(@lineNum : 2) {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lineNum;
  overflow: hidden;
}

其他.less文件中

配置自己需要的样式即可，书写规范同less

二：main.js中引入

/ 引入全局样式表1
import '@/styles/index.less'

三：在页面模块中调用—demo为jsx写法

index.js文件中

import styles from './style.module.less'
export default {
  name: 'test',
  props: {},
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {},
  render () {
    return (
      <div class={styles.test}>
        <div class={styles.demo}>测试测试测试测试测试测试测试测试测试测试</div>
      </div>
    )
  }
}

style.module.less文件中

.test {
  height: 100vh;
  padding: @padding-large; // 变量引用
  background: @theme-color-dark; // 变量引用
}
.demo{
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: @theme-color-light; // 变量引用
  background: @button-color-disabled; // 变量引用
  .ellipsisLine(3)  // mixin引用
}

此时页面重启，会报如下错误，主要原因缺少模块与相关配置

四：解决问题，增加配置

下载模块

npm i sass-resources-loader vue-cli-plugin-style-resources-loader --save-dev

增加配置

方法一：在根目录创建一个vue.config.js的文件

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 自己对应文件路径，全局变量路径，不能使用路径别名
        path.resolve(__dirname, "./src/styles/index.less"),
      ],
    },
  },
};

方法二：在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码

 function lessResourceLoader() {
        var loaders = [
            cssLoader,
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                      // 自己对应文件路径，全局变量路径，不能使用路径别名
                      path.resolve(__dirname, '../src/styles/index.less'),
                    ]
                }
            }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

五：重启项目，配置完成

具体实现效果如下，背景颜色、字体颜色、按钮颜色以及间距等为less变量；单行溢出省略号展示为mixin函数