Vue单文件组件怎么分离出独立的css

有一个单文件组件,两个html用到了它,这两个html分别有一个自己的css。我用mini-css-extract-plugin分离出了app.vuestyle,但是这导致生成的one.csstwo.css被写入了同样的内容:就是app.vue中的style
目录如下

  • app.vue
  • one
    • one.html
    • one.js
    • one.scss
  • two
    • two.html
    • two.js
    • two.scss

这是部分webpack.config.js

    module: {
        rules: [
            {test: /\.vue$/, use: ['vue-loader']},
            {test: /\.scss$/, use: [miniCssExtractPlugin.loader, 'css-loader', 'sass-loader']},
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
        new miniCssExtractPlugin({
            filename: 'css/[name].[chunkhash].css'
        }),
    ... ...

vue-cli 了解一下。。。

感谢回答,但是我学习webpack想手动整合一下vue,学一下基础的知识嘛,不是图方便