如何从每个组件排列的单独的 scss 源文件生成多个 css 文件？

Question

我有以下 vue 组件 Test.vue 并想将此 css 与我的其他组件 Home.vue 的 css 一起拆分为 test.css 以回家吧.css。然而，一切都编译成 app.css 并合并一切。

<style lang='scss'>

    h2 {
        color: 1px solid red;
    }

</style>

<script>

    export default {
        name: 'test',
    }

</script>

<template>
    <div class='Test'>
        <h2>test</h2>
    </div>
</template>

我正在使用它为另一个项目构建一个 html 和 css 编译器，因此我不必在其中编写代码，而只需从这个 vue 构建的 prod html+css 复制结构。这样我就可以将这些单独的 test.css 和 home.css 文件复制到我的其他系统。不过现在，它结合了样式，并且没有每个组件的样式解耦。

我真的不知道从哪里开始拆分 css，我已经搜索了几个小时。

当前：

dist
--/css
----app.css

想要的：

dist
--/css
----app.css
----test.css

Answer 1

Vue Webpack loader's documentation 建议将 mini-css-extract-plugin 用于 Webpack 4 或 extract-text-webpack-plugin 用于 Webpack 3。您是否尝试过使用它？