首页 文章

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

提问于
浏览
0

我现在已经搜索了几个小时而没有任何运气 . 我正在尝试在现有的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:继承; - lightg:#9e9e9e; - 主色:#ec4d3d; - 奇细胞边框颜色:#e5e5e5; - 表细胞边框颜色:#e5e5e5; - 周末色: #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-颜色:RGBA(0,0,0,0.04); - 小时排色:#212121; - 主色:#4285F4; - 奇 - 细胞边框颜色:透明; - 表小区-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) ;不透明度: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;位置:绝对;宽度:50px} .calendarium.gstyle .day-indicator {-ms-flex-align:start; -ms-flex-direction:column; -webkit-box-align:start; -webkit-box - 方向:正常; -webkit-盒定向:垂直;对齐项:FLE x-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-even t {background-color:#bfecff; border-left:3px solid#34aadc; color:#1f6570; opacity:.74} .week-navigator {background:-webkit-gradient(linear,left top,left bottom,from(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;显示:-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-bloc k; 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:悬停{不透明度:1} .wrapping-所有{背景色:#FFF;最小宽度:300像素} . 无涡形{最大高度:100%;溢出-γ:隐藏}·小时-指示符 - 线{-moz-用户选择:无; -MS-FLEX对齐:中心; -MS-用户选择:无; -webkit箱对齐:中心; -webkit-用户选择:无;对齐项:中心;显示:-webkit盒;显示:-MS-Flexbox的;显示:弯曲;高度:10px的;指针事件:无;位置:绝对的;用户选择:无;宽度:100%; z索引: 2}·小时指示器线> span.line {-MS-FLEX:1; -webkit盒-FLEX:1;背景色:VAR( - 主色);显示:块;弯曲:1;高度: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 web ..> wwwroot / src / components / Calendar.vue(Calendar.vue:1)at webpa ck_require(bootstrap:19)at module ../ wwwroot / src / routes.js(routes.js:1)at 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

如果我需要提供任何东西,请告诉我!

提前致谢 :)

2 回答

  • 0

    我没有足够的代表发表评论,但我想知道问题是否:

    use: [
                'vue-style-loader',
                'css-loader',
                'sass-loader',
                'less-loader'
            ]
    

    我对webpack很新,但我认为这个处理程序较少,并将文件传递给sass,后者将其传递给css加载器 . 因此,如果您的项目中有任何sass文件(扩展名为.css),它将首先作为较少的文件加载/解析 .

    如果您的项目中包含较少的sass和sass,则每个项目都需要单独的规则部分 .

  • 0

    从此行中删除.css

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

    您对vue的决心应如下所示:

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

    没有理由将CSS放在那里,因为webpack会在侧面编译它

相关问题