关于javascript：带有webpack的Kalendar-vue：“你可能需要一个合适的加载器来处理这个文件类型。”嗨


Kalendar-vue with webpack: “You may need an appropriate loader to handle this file type.”Hi

我已经找了好几个小时了，没有任何运气。我正试图在现有的Webpack项目中实现kalendar vue https://github.com/altinselimi/kalendar。当我运行项目时，这是我得到的错误：

未捕获错误：模块分析失败：意外标记(1:0)您可能需要适当的加载程序来处理此文件类型。

{-webkit-box-sizing:border-box;box-sizing:border-box}.calendarium{--current-day-color:#fef4f4;--dark:#212121;--hour-row-color:inherit;--lightg:#9e9e9e;--main-color:#ec4d3d;--odd-cell-border-color:#e5e5e5;--table-cell-border-color:#e5e5e5;--weekend-color:#f7f7f7;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.calendarium.gstyle{--current-day-color:rgba(0,0,0,0.04);--hour-row-color:#212121;--main-color:#4285f4;--odd-cell-border-color:transparent;--table-cell-border-color:#e0e0e0;--weekend-color:transparent;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif}.calendarium.gstyle .week-navigator{background:#fff;border-bottom:none;color:rgba(0,0,0,.54);padding:20px}.calendarium.gstyle .week-navigator button{color:rgba(0,0,0,.54)}.calendarium.gstyle .existing-event,.calendarium.gstyle .new-event{background-color:#c6dafc;border-left:none;border-radius:2px;color:rgba(0,0,0,.38);opacity:1;text-shadow:none}.calendarium.gstyle .existing-event>,.calendarium.gstyle .new-event>{text-shadow:none}.calendarium.gstyle .existing-event{width:96%}.calendarium.gstyle .existing-event .time{right:12px}.calendarium.gstyle .sticky-top .days{margin-left:0;padding-left:50px}.calendarium.gstyle .all-day{display:none}.calendarium.gstyle .hours,.calendarium.gstyle ul.building-blocks li{border-right:1px solid var(--table-cell-border-color)}.calendarium.gstyle .hours li{font-size:80%}.calendarium.gstyle .hour-indicator-line>span.line{background-color:#db4437;height:2px}.calendarium.gstyle .days{border-top:1px solid var(--table-cell-border-color);position:relative}.calendarium.gstyle .days:before{background-color:var(--table-cell-border-color);bottom:0;content:"";height:1px;left:0;position:absolute;width:50px}.calendarium.gstyle .day-indicator{-ms-flex-align:start;-ms-flex-direction:column;-webkit-box-align:start;-webkit-box-direction:normal;-webkit-box-orient:vertical;align-items:flex-start;border-right:1px solid var(--table-cell-border-color);color:var(--dark);display:-webkit-box;display:-ms-flexbox;display:flex;flex-direction:column;font-size:13px;padding-left:16px}.calendarium.gstyle .day-indicator.is-before{color:#757575}.calendarium.gstyle .day-indicator .number-date{-ms-flex-order:2;-webkit-box-ordinal-group:3;font-size:40px;order:2}.calendarium.gstyle .day-indicator .letters-date{font-weight:500}.calendarium.gstyle .day-indicator:first-child{position:relative}.calendarium.gstyle .day-indicator:first-child:before{background-color:var(--table-cell-border-color);content:"";height:100%;left:-1px;position:absolute;top:0;width:1px}.calendarium.non-desktop .building-blocks{pointer-events:none}.existing-event,.new-event{cursor:default;font-size:14px;height:100%;padding:4px 6px;width:100%;word-break:break-word}.existing-event h4,.new-event h4{font-weight:400}.new-event{background-color:#34aadc;opacity:.9}.new-event>{text-shadow:0 0 7px rgba(0,0,0,.25)}.existing-event{background-color:#bfecff;border-left:3px solid #34aadc;color:#1f6570;opacity:.74}.week-navigator{background:-webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#f9f9f9));background:linear-gradient(#fdfdfd,#f9f9f9);border-bottom:1px solid #ec4d3d;padding:10px 20px}.week-navigator,.week-navigator .nav-wrapper{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.week-navigator .nav-wrapper{-ms-flex-pack:justify;-webkit-box-pack:justify;font-size:22px;justify-content:space-between;margin:0 auto;max-width:30ch;width:25ch}.week-navigator button{-ms-flex-align:center;-webkit-box-align:center;align-items:center;background:transparent;border:none;color:#ec4d3d;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;margin:0 10px;padding:0 0 5px}.week-navigator .chevron:before{-webkit-transform:rotate(45deg);border-style:solid;border-width:.11em .11em 0 0;content:"";display:inline-block;height:.6em;left:0;position:relative;top:.15em;transform:rotate(45deg);vertical-align:top;width:.6em}.week-navigator .chevron.left:before{-webkit-transform:rotate(-135deg);left:.25em;transform:rotate(-135deg)}.week-navigator .chevron{opacity:.7;outline:none}.week-navigator .chevron:active,.week-navigator .chevron:focus,.week-navigator .chevron:hover{opacity:1}.wrapping-all{background-color:#fff;min-width:300px}.no-scroll{max-height:100%;overflow-y:hidden}.hour-indicator-line{-moz-user-select:none;-ms-flex-align:center;-ms-user-select:none;-webkit-box-align:center;-webkit-user-select:none;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:10px;pointer-events:none;position:absolute;user-select:none;width:100%;z-index:2}.hour-indicator-line>span.line{-ms-flex:1;-webkit-box-flex:1;background-color:var(--main-color);display:block;flex:1;height:1pxbuild.js:9230)
at webpack_require (bootstrap:19)
at Module../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./wwwroot/src/components/Calendar.vue?vue&type=script&lang=js& (build.js:1875)
at webpack_require (bootstrap:19)
at Module../wwwroot/src/components/Calendar.vue?vue&type=script&lang=js& (Calendar.vue?3701:1)
at webpack_require (bootstrap:19)
at Module../wwwroot/src/components/Calendar.vue (Calendar.vue:1)
at webpack_require (bootstrap:19)
at Module../wwwroot/src/routes.js (routes.js:1)
at webpack_require (bootstrap:19)

这是我第一个使用Webpack的项目，所以我不知道该怎么做。我不确定你们想看哪些文件，但我认为问题出在这些文件中。

日历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>

    <kalendar :configuration="calendar_settings" :appointments="appointments" />

</template>


    import { Kalendar } from 'kalendar-vue';
    import 'kalendar-vue/dist/kalendarvue.css';

    export default {
        components: {
            Kalendar
        }, data: () => ({
            appointments: [],
            calendar_settings: {
                style: 'material_design', // ['flat_design', 'material_design']
                view_type: 'Month', // ['Month', 'Day']
                split_value: 20, // Value % 60 === 0
                cell_height: 20, // !isNaN(Value)
                scrollToNow: true, // Boolean
                current_day: new Date(), // Valid date
                military_time: true, // Boolean
            },
    })
    }

包装袋

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
 "name":"someProject",
 "description":"A project description",
 "author":"Anders Tofte",
 "private": true,
 "dependencies": {
   "axios":"^0.18.0",
   "bootstrap":"^4.1.3",
   "jquery":"3.3.1",
   "kalendar-vue":"^0.2.3",
   "less-loader":"^4.1.0",
   "popper.js":"1.14.4",
   "vue":"2.5.17",
   "vue-router":"^3.0.1"
  },
 "devDependencies": {
   "babel-core":"6.26.3",
   "babel-loader":"7.1.5",
   "babel-preset-env":"1.7.0",
   "css-loader":"^0.28.11",
   "file-loader":"^2.0.0",
   "node-sass":"^4.9.0",
   "sass-loader":"^7.1.0",
   "vue-loader":"15.4.1",
   "vue-style-loader":"^4.1.2",
   "vue-template-compiler":"2.5.17",
   "webpack":"4.17.2",
   "webpack-cli":"3.1.0"
  },
 "scripts": {
   "build":"webpack --progress --color --watch --display-error-details"
  }
}

web包.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
let path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
    mode:"development",
    entry:"./wwwroot/src/main.js",
    output: {
        filename:"build.js",
        path: path.resolve("./wwwroot/dist/")
    },
    resolve: {
        extensions: [".js",".vue",".css"],
        alias: {
           "vue$":"vue/dist/vue.esm.js"
        }
    },
    devtool:"source-map",
    module: {
        rules: [
            {
                test: /\.css$/,

                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader',
                    'less-loader'
                ],
            }, {
                test: /\.vue$/,

                loader: 'vue-loader',
                options: {
                    loaders: {
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,

                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

我用

1
webpack watch

如果我需要提供任何东西，请告诉我！

事先谢谢：)

相关讨论

从此行中删除.css

1
extensions: [".js",".vue",".css"],

你对Vue的决心应该是：

1
2
3
4
5
6
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
},

没有理由把CSS放在那里，因为Webpack会编译它

相关讨论

我没有足够的代表发表评论，但我想知道问题是否在于：

1
2
3
4
5
6
use: [
            'vue-style-loader',
            'css-loader',
            'sass-loader',
            'less-loader'
        ]

我对Webpack还比较陌生，但我认为它处理的比较少，并将文件传递给sass，sass将文件传递给css加载器。因此，如果您的项目中有任何SASS文件(扩展名为.css)，那么它将首先作为一个较小的文件进行加载/分析。

如果您的项目中同时有LESS和SASS，则需要为每个项目分别设置规则部分。

相关讨论