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

Всем добрый день!
Изучаю 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"
  }
}
  • Вопрос задан
  • 746 просмотров
Решения вопроса 1
@GUY Автор вопроса
"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'
                })
            }
        ]
    }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы