RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

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

不加载项目样式,webpack

  • 772

VUE + spring上的项目,我用什么方式都不能固定css,一开始就是不行,在尝试添加类样式时添加了style-loader有效,但是当尝试添加任何样式参数 ."style name" {color: bla bla}时,它会因以下错误而崩溃:

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/style-loader/dist/cjs.js!./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/vue-loader/lib/loaders/stylePostLoader.js):
CssSyntaxError: C:\Users\pingm\IdeaProjects\kursovaya\src\main\resources\static\js\pages\App.vue:1:1: Unknown word
    at Input.error (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\input.js:130:16)
    at Parser.unknownWord (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parser.js:563:22)
    at Parser.other (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parser.js:168:12)
    at Parser.parse (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parser.js:77:16)
    at parse (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\parse.js:17:12)
    at new LazyResult (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\lazy-result.js:60:16)
    at Processor.<anonymous> (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\processor.js:138:12)
    at Processor.process (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\postcss\lib\processor.js:117:23)
    at doCompileStyle (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\@vue\component-compiler-utils\dist\compileStyle.js:46:35)
    at compileStyle (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\@vue\component-compiler-utils\dist\compileStyle.js:12:12)
    at Object.module.exports (C:\Users\pingm\IdeaProjects\kursovaya\node_modules\vue-loader\lib\loaders\stylePostLoader.js:9:33)
 @ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& 1:0-321 1:337-340 1:342-660 1:342-660
 @ ./src/main/resources/static/js/pages/App.vue
 @ ./src/main/resources/static/js/main.js

应用程序.vue

<template>

    <div>
        <div v-if="!profile">Необходимо авторизоваться через <a href="/login">Google</a></div>
        <div v-else>
            <div>{{ profile.name }}&nbsp;<a href="/logout">Выйти</a></div>
            <messages-list :messages="messages"/>
        </div>
    </div>

</template>

<script>
import MessagesList from "components/messages/MessageList.vue";
import {addHandler} from "util/ws";
import {getIndex} from "util/collections";


export default {
    components: {
        MessagesList
    },
    data() {
        return {
            messages: frontendData.messages,
            profile: frontendData.profile
        }
    },
    created() {
        addHandler(data => {
            let index = getIndex(this.messages, data.id)
            if (index > -1){
                this.messages.splice(index, 1, data)
        } else {
                this.messages.push(data)
            }
        })
    }
}

</script>

<style>

</style>

主.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from 'pages/App.vue'
import {connect} from "./util/ws";

if (frontendData.profile) {
    connect()
}

Vue.use(VueResource)

new Vue({
    el: '#app',
    render: a => a(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',
                    'css-loader',
                    'style-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        modules: [
            path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
            path.join(__dirname, 'node_modules'),
        ],
    }
}

包.json

{
  "name": "kursovaya",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "@stomp/stompjs": "^5.4.4",
    "resolve-url": "^0.2.1",
    "sockjs-client": "^1.5.0",
    "vue": "^2.6.11",
    "vue-resource": "^1.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.1",
    "style-loader": "^1.2.1",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

vue.js
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Aziz Umarov
    2020-08-14T02:42:13Z2020-08-14T02:42:13Z

    换个试试

    样式加载器和 css 加载器。

           use: [
                    'vue-style-loader',
                    'style-loader',
                    'css-loader'  
                ]
    
    • 1

相关问题

  • Vue.js 如何拖放表格内容

  • 如何完成切换并单击组?

  • 如何将内容加载到属于循环元素的块中?

  • 带有计数器的 VueJs 循环

  • Vue.js 如何制作导航箭头

  • 启动 npm serve 时抛出错误

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