How to configure webpack in vue-cli to compile less- > css separately

In the

project, you need a set of stylesheets that cover some common styles. What I hope to achieve is:
write a single style.less to generate style.css, in real time

//style.less
.btn{
    ...
}

reference

in the html tag

<a class="btn"></a>

and do not want the style in vue to refer to and edit again

<style scoped lang="less">
@import "../../assets/less/style.less";
.btn{
    .btn;
}

so, is my idea reasonable? How should it be configured if it is reasonable? Do you need gulp to cooperate

Css vue-loader less vue-cli webpack

Mar.03,2021

vue-loader configure less-loader

if you don't add reference dependencies, webpack won't automatically handle it for you. If there are more
less files, the plug-in gulp-less should be available; if there are few, just type less on the command line to compile.
but what I actually want to recommend is easy-less this vscode plug-in, every time I save a less file, I will automatically compile a css file for you and put it in the relevant directory.

Previous: The communication between Vue2.0 sibling components (or multilevel components) is better with Vuex or EventBus.

Next: Mini Program, after deleting a certain order data, it was deleted in the background, but the page was not deleted?