Kalender-vue with webpack："您可能需要一个适当的加载程序来处理此文件类型。"嗨嗨

Question

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

未捕获错误：模块解析失败：意外令牌（1:0）您可能需要一个适当的加载程序来处理此文件类型。

{-webkit框大小：边框框；框大小：边框框}。日历{当前日期颜色：#fef4f4；--深色：#21212121；--小时行颜色：继承；--浅色：#9e9e9e；--主色：#ec4d3d；--奇数单元格边框颜色：#e5e5e5；--周末颜色：#f7f7f7；字体系列：-苹果系统、BlinkMacSystemFont、Segoe UI、Roboto、Helvetica、UI、sans serif、apple颜色表情符号、Segoe符号}。日历。gstyle{--当前日期颜色：rgba（0,0,0,0.04）；--小时行颜色：#212121；--主颜色：#4285f4；--奇数单元格边框颜色：透明；--表格单元格边框颜色：#E0E0E0E0；--周末颜色：透明；字体系列：Roboto，-apple系统，BlinkMacSystemFont，Segoe UI，Arial，sans serif}。日历。格斯泰尔。周导航器{背景：#fff；边框底部：无；颜色：rgba（0,0,0.54）；填充：20px}。日历。格斯泰尔。周导航器按钮{颜色：rgba（0,0,0,54）}。日历。格斯泰尔。现有事件，。日历。格斯泰尔。新事件{背景颜色：#c6dafc；左边框：无；边框半径：2px；颜色：rgba（0,0,0,38）；不透明度：1；文本阴影：无}。日历。格斯泰尔。现有事件

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

Calendar.vue

<template>

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

</template>

<script>
    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
            },
    })
    }

</script>

包裹json

{
  "name": "someProject",
  "description": "A project description",
  "author": "Anders Tofte <email>",
  "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"
  }
}

网页包。配置。js

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()
    ]
};

我负责这个项目

webpack watch

如果我需要提供什么，请告诉我！

提前感谢：）

Answer 1

拆下。这行的css

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

您对vue的解决方案应该如下所示：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
},

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