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

Posted 2023-02-22

【中文标题】带有 webpack 的 Kalendar-vue：“你可能需要一个合适的加载器来处理这种文件类型。”嗨

【英文标题】：Kalendar-vue with webpack: "You may need an appropriate loader to handle this file type."Hi

【发布时间】：2019-02-24 01:03:33

【问题描述】：

我已经搜索了几个小时，但没有任何运气。我正在尝试在现有的 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- navigatorbackground:#fff;border-bottom:none;color:rgba(0,0,0,.54);padding:20px.calendarium.gstyle .week-navigator buttoncolor:rgba(0,0,0 ,.54).calendarium.gstyle .existing-event,.calendarium.gstyle .new-eventbackground-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-eventwidth:96%.calendarium.gstyle .existing-event .timeright:12px.calendarium.gstyle .sticky-top .daysmargin-left:0;padding-left:50px。 calendarium.gstyle .all-daydisplay:none.calendarium.gstyle .hours,.calendarium.gstyle ul.building-blocks liborder-right:1px solid var(--table-cell-border-color)。 calendarium.gstyle .hours lifont-size:80%.calendarium.gstyle .hour-indicator-line>span.linebackground-color:#db4437;height:2px.calendarium.gstyle .daysborder-top :1px 实心 var(--table-cell-border-color);position:relative.calendarium.gstyle .days:beforebackground-color:var(--table-cell-border-color);bottom:0;内容：“”；高度：1px；左：0；位置：绝对；宽度：50px.calendarium.gstyle .day-indicator-ms-flex-align:start;-ms-flex-direction:column;-webkit -box-align：开始；-webkit-box-direction：正常；-webkit-box-orient：垂直；a lign-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-beforecolor:#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-datefont-weight: 500.calendarium.gstyle .day-indicator:first-childposition:relative.calendarium.gstyle .day-indicator:first-child:beforebackground-color:var(--table-cell-border-color) ;content:"";height:100%;left:-1px;position:absolute;top:0;width:1px.calendarium.non-desktop .building-blockspointer-events:none.existing-event, .new-eventcursor: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-eventbackground-color:#34aadc;opacity:.9.new-event>text-shadow:0 0 7px rgba(0,0,0, .25).existing-eventbackground-color:#bfecff;border-left:3px solid #34aadc;color:#1f6570;opacity:.74.week-navigatorbackground:-webkit-gradient(linear,left上，左下，从（#fdfdfd），到（#f9f9f9））；背景：线性渐变（#fdfdfd，#f9f9f9）；边框底部：1px 实心#ec4d3d；填充：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:"";显示：内联块；高度：.6em；左：0；位置：相对；顶部：.15em；变换：旋转（45deg）；垂直对齐：顶部；宽度：.6em.week-navigator .chevron.left :before-webkit-transform:rotate(-135deg);left:.25em;transform:rotate(-135deg).week-navigator .chevronopacity:.7;outline:none.week-navigator .chevron:活动，.week-navigator .chevron:focus,.week-navigator .chevron:hoveropacity:1.wrapping-allbackground-color:#fff;min-width:300px.no-scrollmax-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);显示:块;flex:1;height:1pxbuild.js:9230) 在 webpack_require (bootstrap:19) 在 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& (构建.js:1875) 在 webpack_require (bootstrap:19) 在 Module../wwwroot/src/components/Calendar.vue?vue&type=script&lang=js& (Calendar.vue?3701:1) 在 webpack_require (bootstrap:19) 在 Module../wwwroot/src/components/Calendar.vue (Calendar.vue:1) 在 webpack_require (bootstrap:19) 在模块../wwwroot/src/routes.js (routes.js:1) 在 webpack_require (bootstrap:19)

这是我第一个使用 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>

package.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"
  

webpack.config.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

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

提前致谢:)

【问题讨论】：

import 'kalendar-vue/dist/kalendarvue.css'; 在我看来不对；删除它，看看它是否编译？

我会编译但没有附加 css。问题出在 webpack.config.js :)

【参考方案1】：

从这一行删除 .css

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

你对 vue 的决心应该是这样的：

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

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

【讨论】：

按照你说的做之后，我得到的错误是：未捕获的错误：模块构建失败（来自 ./node_modules/less-loader/dist/cjs.js）：错误：找不到模块'less ' 在 Function.Module._resolveFilename ..

没关系我误读了我得到的错误。我认为它不能解决 less-loader 不少。我安装的少，它工作。非常感谢！

@AndersTofte 很高兴我能帮上忙！