使用全局less变量和样式

image.png

common.less

@max-width: 375px;
@text-color1: #3C4859;

style.less

.txt-title-18{
    font-size: 18px;
    color: @text-color1;
    font-weight: bold;
}

在main.js中

import style from './styles/style.less';
 
app.use(style);

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
（需要下载资源加载工具）

在vue.config.js 加入pluginOptions

pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "src/styles/common.less")] // 引入全局样式变量
        }
    }

OK!