Как сказать 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. Как ему сказать, чтобы он его не трогал и игнорировал? =)