How to extract from vue css and generate in a separate folder?

Question

webpack

Good afternoon everyone!
Learning webpack
have styles in App.vue

<template>
    <div id="app">
        <h1>{{ title }}!</h1>
        <router-view></router-view>
        <router-link :to="{ name: 'Home' }">Home</router-link>
        <router-link :to="{ name: 'Test' }">Test</router-link>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                title: 'Welcome To My Site!'
            }
        }
    }
</script>

<style type="text/css" scoped>
    h1 {
        font-size: 72px;
    }
</style>

I really want to be able to pull them out to /public/test/css I don’t understand how to do it/
webpack.mix.js

let mix = require('laravel-mix');

mix.setPublicPath('../../')
    .js('entry-client.js', '/public/test/js/')
    .js('entry-server.js', '/public/test/js/')
;

mix.webpackConfig({
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.common.js'
        }
    }
});

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.22.1",
    "vue": "^2.5.16",
    "vue-loader": "^15.3.0",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.16",
    "vue-style-loader": "^4.1.1",
    "vuex": "^3.0.1"
  },
  "dependencies": {
    "extract-text-webpack-plugin": "^3.0.2",
    "vuex-router-sync": "^5.0.0"
  }
}

Answer 1

"vue-template-compiler": "^2.5.17",
"extract-text-webpack-plugin": "^3.0.2",
or
"mini-css-extract-plugin": "^0.4.1",
you need to put, but the rule

plugins:[
        new ExtractTextPlugin("css/style.css"),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        preserveWhitespace: false
                    }
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader'
                })
            }
        ]
    }