如何从每个组件排列的单独的SCSS源文件中生成多个CSS文件

Question

我有以下vue component test.vue 一个想将此CSS与我的其他组件 HOME一起拆分为test.css.css。的CSS为home.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加载程序的文档建议将 mini-css-extract-plugin用于webpack 4或 extract-text-webpack-plugin for webpack 3.您是否尝试过？