在项目中如何自动注入less文件并引入?

项目中很多样式是公用的，比如常见的配色色值，为了方便后期修改维护方便，会把它们定义成变量，统一定义在less文件中，然后在需要用到的组件中引入使用。

1.样式文件准备

src/styles/variables.less

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

src/styles/mixins.less

// 鼠标经过上移阴影动画
.hoverShadow () {
  transition: all .5s;
  &:hover {
    transform: translate3d(0,-3px,0);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  }
}

less混入就是：声明一段css代码（选择器包裹的代码）或者函数，在其他css选择器调用，可复用包裹的代码。

2.测试使用

在任意组件中，引入上边定义的less变量和混合，测试使用

<style lang="less">
@import '~@/styles/variables.less';
@import '~@/styles/mixins.less';
.container{
  color: @xtxColor;
  .hoverShadow();
}
</style>

3.自动注入less文件引用

很多的业务组件都需要使用这些变量，如果我们每一个业务组件都手动引入然后使用的话，开发量巨大

3.1添加一个vuecli的插件

vuecli的插件，不是npm包
在当前项目下执行一下命令vue add style-resources-loader

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

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

3.2注入less地址文件

在上一步插件自动添加的vue.config.js文件中，补充patterns设置。这里需要填入希望被自动导入的less文件地址。

+  const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
+        path.join(__dirname, './src/styles/variables.less'),
+        path.join(__dirname, './src/styles/mixins.less')
      ]
    }
  }
}

修改了配置文件，注意重启服务!!!

3.3测试效果

<style lang="less">
// 这里不写，在style-resources-loader插件中使用
// @import '~@/styles/variables.less';
// @import '~@/styles/mixins.less';
.container{
  color: @xtxColor;
  .hoverShadow();
}
</style>