Как сказать webpack'у, чтобы он игнорировал стили в компонентах Vue?

Изучаю vue ssr и вместе с ним webpack. Сейчас пытаюсь собрать production версию. И так я имею:

server-entry.js:

import createApp from './app'

export default context => {
    const app = createApp()
    return app
}

app.js

import Vue from 'vue'
import App from './App.vue'


function createApp(context) {
    const app = new Vue({
        render: h => h(App)
    })
    return app
}

export default createApp

App.vue:

<template>
    <div class="main">Hello world!</div>
</template>


<style>
    .main {
        color: red;
    }
</style>

webpack.base.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const srcPath = path.resolve(process.cwd(), 'src');
const isProduction = true;

module.exports = {
    mode: process.env.NODE_ENV,
    devtool: isProduction ? 'source-map' : 'eval-source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                include: [ srcPath ],
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [ srcPath ],
                exclude: /node_modules/,
            },          
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: '[path][name].[hash:7].[ext]',
                            context: srcPath
                        }
                    }
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: '[name].[hash:7].[ext]'
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

webpack.server.config.js

const nodeExternals = require('webpack-node-externals');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const path = require('path');
const { merge } = require('webpack-merge');

const base = require('./webpack.base.config');
const srcPath = path.resolve(process.cwd(), 'src');

module.exports = merge(base, {
    entry: path.join(srcPath, 'server-entry.js'),
    target: 'node',
    // This tells the server bundle to use Node-style exports
    output: {
        libraryTarget: 'commonjs2'
    },

    // This is the plugin that turns the entire output of the server build
    // into a single JSON file. The default file name will be
    // `vue-ssr-server-bundle.json`
    plugins: [
        new VueSSRServerPlugin(),
    ]
});

При попытке собрать всё это используя webpack.server.config.js я получаю ошибку:

ERROR in ./src/App.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue- 
loader-options!./src/App.vue?vue&type=style&index=0&lang=css&) 18:0
Module parse failed: Unexpected token (18:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> .main {
|   color: red;
| }
@ ./src/App.vue?vue&type=style&index=0&lang=css& 1:0-123 1:139-142 1:144-264 1:144-264
@ ./src/App.vue
@ ./src/app.js
@ ./src/server-entry.js

Что я делаю не так? Конфиг для webpack не мой, я нашёл его в интернете. Если я правильно понимаю, то проблема в том, что собирая серверную часть он не знает как обработать css. Как ему сказать, чтобы он его не трогал и игнорировал? =)


Ответы (0 шт):