RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1165807
Accepted
Daniil Baev
Daniil Baev
Asked:2020-08-14 14:20:29 +0000 UTC2020-08-14 14:20:29 +0000 UTC 2020-08-14 14:20:29 +0000 UTC

Webpack 不编译样式类(Vuetify)

  • 772

尝试通过webpack连接vuetify,按照官方文档,但不断收到以下错误

第一种:

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

PS .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文件中的代码时它们会改变

包.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')

我的 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'),
        ],
    }
}
webpack
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Daniil Baev
    2020-08-14T15:21:09Z2020-08-14T15:21:09Z
    1. 我们查看您的 sass 版本和 webpack 离线文档中提供的版本(在我的那一刻,第 9 版已发布,但尚未获得第 8 版的支持)

    2. 将以下配置添加到 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'),
            ],
        }
    
    1. 在 main.js
        import vuetify from 'plugins'
    
    • 0

相关问题

  • 通过 webpack 构建时连接图像、样式、html 中的字体、css 文件时路径中断

  • 如何为 webpack-dev-server 正确设置 publicPath 的路径

  • 设置 Webpack 和 Pug,如何正确指定图片的 src

  • 如何组织PHPStorm、SASS和Webpack的工作,使头文件中导入的变量在其他文件中被识别?

  • webpack 从空的 js 文件生成代码

  • Webpack4 女巫 webpack.optimize.CommonsChunkPlugin

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5