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

Question

我有以下 vue 组件 Test.vue 并且想将此 css 与我的其他组件 Home.vue 的 css 一起拆分为 test.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 loader's documentation建议为 Webpack 4 使用 mini-css-extract-plugin 或为 Webpack 3 使用 extract-text-webpack-plugin。你试过用那个吗？