Webpack Vue.js-将CSS（SCS）与单个*.Vue文件分开

默认的Vue.js概念是将模板、js和样式放在一个*.Vue文件中

我的问题是：如何从*.vue文件中划分CSS/SCS，并获得以下结构：

components
-- componentA
---- componentA.vue
---- componentA.scss
-- componentB
---- componentB.vue
---- componentB.scss
-- componentC
---- componentC.vue
---- componentC.scss

---

有没有什么好的实践来创建这样的项目结构并通过Webpack构建主/区CSS？任何示例或Vue CLI模板？

您可以导入以下样式：

<template>
...
</template>

<style lang="scss">
    @import './foo.scss';
</style>

<script>
...
</script>

...
@导入“/foo.scss”；
...

---

您必须安装和。

一旦*.SCSS文件存在于特定组件文件夹中，是否有任何自动方法将其附加到全局/通用CSS（无需添加@import）？我还没有尝试过，但您可以查看预加载程序。类似于：foo.scs中变量的intellisense是否在.Vue文件中工作？我在vscode中尝试过，但不起作用（但SCS已正确导入）