Vue-Less的自动和手动引入

1. 先准备样式变量文件
   style.less

@fontColor: #27ba9b;

手动引入

在vue页面的style中使用

<style scoped lang='less'>
// 引入
@import '~@/styles/variables.less';
// 使用
p {
  color: @sucColor;
}
</style>

自动引入

1. 下载一个vue-cil插件

vue add style-resources-loader

2. 安装完毕后会在vue.config.js中自动添加配置

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

3. 把需要注入的文件配置一下后，重启服务即可

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 配置哪些文件需要自动导入
        // '样式地址'
       path.join(__dirname, './variables.less')
      ]
    }
  }
}

4. 使用

<style scoped lang='less'>
.xtx-home-page {
  color: @sucColor;
}
</style>