第一步:安装style-resources-loader👇
vue add style-resources-loader
第二步:在vue.config.js中加入这块代码👇
// 如果没有下载path插件需要先安装一下
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less', // 如果你使用的是scss,那这里要写scss
patterns: [
// 此路径要根据你的实际情况
path.resolve(__dirname, './src/assets/variableCss.less')
]
}
}
}
第三步:根据路径创建variableCss.less文件,书写格式👇
@bas-bgc: rgba(63, 156, 149);
@bas-width: 2rem;
第四步:在样式里使用👇
<style lang="less">
.zsFooter {
width: @bas-width;
height: 2rem;
background-color: @bas-bgc;
}
</style>
备注:如果你是使用scss,那vue.config.js的preProcessor:scss,然后新建的文件为variableCss.scss,然后文件内格式不是@,而是$,其他都是一样的。