Step1.下载更新至最新的vue-cli3.X
npm install -g @vue/cli
Step2. 安装 vue-cli-plugin-style-resources-loader
根据文档执行:(不要直接npm i 安装,用vue内置的add:)
vue add style-resources-loader
安装过程中,会询问安装哪个预处理器:(我用的是less)
Step3. 手动添加需要引入的变量文件
步骤2完成之后,会在vue.config.js自动添加less的配置,当然变量文件是需要手动添加的
@blueColor:blue;
const path = require("path");
module.exports = {
css: {
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/less/variables.less') // 变量文件位置
]
}
},
}
Step4. 使用
<style lang="less">
@import "~@/style/varibles.less";
.videoCourse .tabs-tab-active{
color: @color;
border-bottom: 1px solid @color;
}
</style>