[JavaScript知识库]vue-cli4+element-ui开发配置 之 less全局变量variable和mixins配置

一、webpack设置：vue.config.js

module.exports = {
	...,
	chainWebpack: (config) => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach((type) =>
            addStyleResource(config.module.rule('less').oneOf(type))
        )
   	}
}

// 配置全局less变量
function addStyleResource (rule) {
    rule
        .use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/assets/css/variable.less'),
                path.resolve(__dirname, './src/assets/css/mixins.less')
            ]
        })
}

二、less全局变量：variable & mixins

variable.less，定义一些常用样式变量

@grey: #878ba5; // 常用灰
@red: #e57471; // 基础红
@max_content_width: calc(~'100% - 20px'); // 内容最大宽度
// and so on...

mixins.less，定义一些常用样式代码块

// 0.5px边框
.border(@border_color: #eaeaea) {
    position: relative;
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        pointer-events: none;
        content: '';
        border: 1px solid @border_color;
        transform: scale(0.5);
        transform-origin: left top;
    }
}

//超出省略-多行
.ellipsis(@line) {
    display: -webkit-box;
    -webkit-line-clamp: @line;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
}
// and so on...