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。您是否尝试过使用它？

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

1 个答案: