安装与使用less

JoJo-Zhang

已于 2023-10-10 10:48:40 修改

阅读量2k

点赞数

文章标签： less vue.js 前端

于 2023-07-26 11:11:19 首次发布

本文链接：https://blog.csdn.net/qq_37291053/article/details/131934821

版权

本文介绍了如何在Vue.js项目中安装和配置Less及less-loader，确保开发环境中正常工作。接着讲解了在main.js中启用Less，以及在组件中使用scoped和lang属性。此外，还提到了引入全局Less变量的步骤，包括安装vue-cli-plugin-style-resources-loader和style-resources-loader，然后在vue.config.js中设置配置，引用变量文件。

摘要由CSDN通过智能技术生成

1、安装less 和less-loader

npm i less less-loader -D  //安装到开发环境

检查是否安装成功；

less -v

2、main.js添加如下配置；

import less from 'less'
Vue.use(less)

3、引入

scoped、lang="less"这两个顺序不能颠倒！
scoped代表样式只在当前页面使用

<style scoped lang="less"></style>  
或导入
import '@/css/common.less'

4、引入全局less变量

1）安装vue-cli-plugin-style-resources-loader
2）安装style-resources-loader
3）编辑vue.config.js

vue.config.js配置添加

const path = require('path')

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname,'src/assets/css/vars.less')]
        }
    }
}