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


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.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9e386-19bd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9e386-19bd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?