Ошибка при подключении vuetify в проект vue ssr
Здраствуйте! В качестве примера использую этот репозиторий. Пробую подключить vuetify. Делаю все по инструкции. При компиляции возникает ошибка:
ERROR in ./node_modules/vuetify/dist/vuetify.min.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| /*!
| * Vuetify v2.2.23
@ ./src/plugins/vuetify.js 12:0-39
@ ./src/app.js
@ ./src/server-entry.js
[ ModuleParseError: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| /*!
| * Vuetify v2.2.23
at handleParseError (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\NormalModule.js:469:19)
at doBuild.err (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\NormalModule.js:503:5)
at runLoaders (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\NormalModule.js:358:12)
at E:\Webs projects\vue-ssr-simple-setup\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (E:\Webs projects\vue-ssr-simple-setup\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (E:\Webs projects\vue-ssr-simple-setup\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (E:\Webs projects\vue-ssr-simple-setup\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at provider (E:\Webs projects\vue-ssr-simple-setup\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9)
at E:\Webs projects\vue-ssr-simple-setup\node_modules\graceful-fs\graceful-fs.js:115:16
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3) ]
E:\Webs projects\vue-ssr-simple-setup\config\setup-dev-server.js:51
throw new Error(stats.compilation.errors);
^
Error: ModuleParseError: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| /*!
| * Vuetify v2.2.23
at Watching.serverCompiler.watch [as handler] (E:\Webs projects\vue-ssr-simple-setup\config\setup-dev-server.js:51:19)
at compiler.hooks.done.callAsync (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\Watching.js:99:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Webs projects\vue-ssr-simple-setup\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (E:\Webs projects\vue-ssr-simple-setup\node_modules\tapable\lib\Hook.js:154:20)
at Watching._done (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\Watching.js:98:28)
at compiler.emitRecords.err (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\Watching.js:73:19)
at Compiler.emitRecords (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\Compiler.js:499:39)
at compiler.emitAssets.err (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\Watching.js:54:20)
at hooks.afterEmit.callAsync.err (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\Compiler.js:485:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Webs projects\vue-ssr-simple-setup\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (E:\Webs projects\vue-ssr-simple-setup\node_modules\tapable\lib\Hook.js:154:20)
at asyncLib.forEachLimit.err (E:\Webs projects\vue-ssr-simple-setup\node_modules\webpack\lib\Compiler.js:482:27)
at E:\Webs projects\vue-ssr-simple-setup\node_modules\neo-async\async.js:2818:7
at done (E:\Webs projects\vue-ssr-simple-setup\node_modules\neo-async\async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Webs projects\vue-ssr-simple-setup\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (E:\Webs projects\vue-ssr-simple-setup\node_modules\tapable\lib\Hook.js:154:20)
[nodemon] app crashed - waiting for file changes before starting...
В интернете нашел похожие вопросы, как оказалось не хватает модулей которые обрабатываю файлы sass & scss. В ходе добавления vuetify я их добавил в соответствии с инструкцией.
Добавил в файл webpack.base.config.js.
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const srcPath = path.resolve(process.cwd(), 'src');
const isProduction = process.env.NODE_ENV === 'production';
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]'
}
}
]
},
// ниже
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
],
},
]
},
plugins: [
new VueLoaderPlugin()
]
};
Однако ничего не изменилось.
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Заметил если закомментировать строку с подключением стилей, все прекрасно собирается. Подскажите пожалуйста в чем может быть проблема. Может я не правильно подключаю модули?
Репозиторий с моим кодом.