Vue如何全局配置less

原创于 2022-10-18 15:46:49 发布 · 976 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #less #javascript

在Vue项目中全局配置Less可以提高样式复用效率。首先通过npm安装less和less-loader。接着，在vue.config.js文件中添加style-resources-loader配置，指定预处理器为less并包含公共样式文件路径，如common.less。在common.less中定义样式方法，即可全局使用。例如，定义一个.boxSize()方法用于设置元素尺寸。

Vue项目怎么全局的配置less

第一步：安装less和less-loader

	npm install less less-loader --save

第二步：

在vue.config.js里边加上这行代码

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

在这里插入图片描述

第三步在common.less文件里定义你的方法然后就可以全局引用了

.boxSize(@width,@height:0,@lineHeight:none){
    width:@width;
    height:@height;
    line-height: @lineHeight;
}

在这里插入图片描述