如何在vue组件中使用公共less变量

使用场，在vue项目中，我们有时候会在组件中使用全局的less变量

在项目中安装插件

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

配置vue.config.js文件

module.exports = {
  ...
  pluginOptions: {
     "style-resources-loader": {
         preProcessor: "less",
         patterns: [
           path.resolve(__dirname, "/src/assets/variable.less")
          ]
      }
  }
  ...
 }

定义变量后直接在组件中使用

variable.less

@scrollbar: {
	&::-webkit-scrollbar {
		width: 12px;
	}
	&::-webkit-scrollbar-thumb {
		background-color: rgba(50, 50, 50, .25);
		border: 2px solid transparent;
		border-radius: 10px;
		background-clip: padding-box;
	}
	&::-webkit-scrollbar-track {
		background-color: rgba(50, 50, 50, .05);
	}
}

global.less

body {
    @scrollbar();
}

ps: 不需要再另外引入variable.less文件