vue-cli 中webpack 怎么配置才能单独编译less->css

Question

项目中，需要一套样式表涵盖一些常用的一些公共的样式。我希望达到的效果是：
单独写一个style.less实时生成style.css，

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

在html标签中引用

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

而不希望是在vue中的style再次引用编辑

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

so,我的这用想法是否合理？ 如果合理应当怎样配置？需要gulp配合吗

Answer 1

vue-loader的options里面配置less-loader

Answer 2

如果不添加引用依赖的话，webpack不会自动帮你处理的。
less文件比较多的话，gulp-less这个插件应该是可以的；如果比较少，直接命令行输入less编译吧。
不过我其实想推荐的是easy-less这个vscode插件，每次保存less文件都自动给你编译一个css文件放在相关目录下。