Как вытащить из vue css и сгенирировать в отдельную папку?

Question

[Роман]

Всем добрый день!
Изучаю webpack
есть стили в 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>

очень хочется их уметь вытаскивать в /public/test/css не пойму как это сделать/
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"
  }
}

Comments

[Роман]

Поробывал так

let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */


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

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    // включаем извлечение CSS
                    extractCSS: true,
                    preserveWhitespace: false
                }
            },
            // ...
        ]
    },
    plugins: [new VueLoaderPlugin(), new ExtractTextPlugin({ filename: 'common.css' })],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.runtime.common.js'
        }
    }
});

билды проходят, но не ясно куда куда сохраняется common.css, ибо в файлах его нет и сбилженые файлы выдают undefined

Answer 1

[Роман]

"vue-template-compiler": "^2.5.17",

"extract-text-webpack-plugin": "^3.0.2",
или
"mini-css-extract-plugin": "^0.4.1",
поставить нужно , а правило

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'
                })
            }
        ]
    }