Webpack не компилирует style классы (Vuetify)
Пытался подключить vuetify через webpack, следовал официальной документации, но постоянно цепляю следующие ошибки
Первый тип:
ERROR in ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!.
/node_modules/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
44 │ .app-main{
│ ^
╵
src\main\resources\static\js\pages\App.vue 44:10 root stylesheet
@ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& (./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loade
r/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&typ
e=style&index=0&lang=css&) 2:26-348
@ ./node_modules/vue-style-loader!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules
/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&
@ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&
@ ./src/main/resources/static/js/pages/App.vue
@ ./src/main/resources/static/js/main.js
ERROR in ./src/main/resources/static/js/main.js
Module not found: Error: Can't resolve '/plugins/vuetify' in 'C:\Users\pingm\IdeaProjects\kursovaya\src\main\resources\static\js'
@ ./src/main/resources/static/js/main.js 5:0-39 14:11-18
P.S .app-main это мой класс стиля. Без vuetify работает прекрасно
Второй тип:
Module not found: Error: Can't resolve '/plugins/vuetify' in 'C:\Users\pingm\IdeaProjects\kursovaya\src\main\resources\static\js'
@ ./src/main/resources/static/js/main.js 5:0-39 13:11-18
i 「wdm」: Failed to compile.
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
Я не знаю что влияет на чередование этих ошибок, но они меняются когда я меняю код в main.js file
package.json
import Vue from 'vue'
import VueResource from 'vue-resource'
import App from 'pages/App.vue'
import {connect} from "./util/ws";
import vuetify from '/plugins/vuetify' // path to vuetify export
if (frontendData.profile) {
connect()
}
Vue.use(VueResource)
new Vue({
el: '#app',
vuetify,
render: a => a(App)
}).$mount('#app')
My Webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js', 'main.js'),
devServer: {
contentBase: './dist',
compress: true,
port: 8000,
allowedHosts: [
'localhost:8080'
],
stats: 'errors-only',
clientLogLevel: 'error'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'style-loader',
'css-loader',
{
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
]
}
]
},
plugins: [
new VueLoaderPlugin()
],
resolve: {
modules: [
path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
path.join(__dirname, 'node_modules'),
],
}
}
Ответы (1 шт):
Автор решения: Daniil Baev
→ Ссылка
Смотрим на версию вашего sass и предлагаемую в офф документации для webpack (на мой момент вышла 9ая, а поддержку с 8ой не подтянули)
В webpack добавляем следующую конфигурацию
resolve: {
alias: {
plugins: path.resolve(__dirname, 'src/plugins/vuetify.js')
},
extensions: ['.js', 'jsx', '.css'],
modules: [
path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
path.join(__dirname, 'node_modules'),
],
}
- В main.js
import vuetify from 'plugins'