Less自动化导入项目中

Less

• 实现 : 让业务组件自动加入公共样式
• 解决的问题
  • 开发的应用有些样式是公共的 , 为了做到统一修改的目的往往需要定义less变量
  • 许多业务组件需要使用这些变量 , 如果手动引入使用代价较大
  • 为了解决这个问题 , 采取自动导入方式 , 方便我们业务组件使用全局less变量

手动引入

• 准备样式变量文件(src/style/var.less)

• // 主题
  @xtxColor:#27BA9B;
  // 辅助
  @helpColor:#E26237;
  // 成功
  @sucColor:#1DC779;
  // 警告
  @warnColor:#FFB302;
  // 价格
  @priceColor:#CF4444;

•  手动引入的例子 , 在app.vue进行测试

• <template>
    <div class="test">我是测试文字</div>
  </template>
  
  <style lang="less" scoped>
  // 引入我们定义了less变化的文件
  // ~线不能丢
  @import "~@/styles/var.less";
  .test {
    color: @xtxColor;
  }
  </style>

• 如果进行修改时候 , 需要一个一个引入代价较大 , 所以自动引入 

 自动引入

• 使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中
• 在项目中安装style-resoures-loader包
• 安装成功之后 在vue.config.js进行配置

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