less的自动化导入 对常用less变量进行自动化导入_greed

less的自动化导入

安装插件

在当前项目下执行一下命令vue add style-resources-loader，添加一个vue-cli的插件

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

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

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

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

测试一下，我们不再需要在组件中手动import引入less文件了，直接使用就可以了

1. 通过vue脚手架的插件，可以辅助自动化导入less文件
2. 后续其他组件在使用less变量时，就不再需要手动导入了