我现在已经搜索了几个小时而没有任何运气 . 我正在尝试在现有的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 回答
我没有足够的代表发表评论,但我想知道问题是否:
我对webpack很新,但我认为这个处理程序较少,并将文件传递给sass,后者将其传递给css加载器 . 因此,如果您的项目中有任何sass文件(扩展名为.css),它将首先作为较少的文件加载/解析 .
如果您的项目中包含较少的sass和sass,则每个项目都需要单独的规则部分 .
从此行中删除.css
您对vue的决心应如下所示:
没有理由将CSS放在那里,因为webpack会在侧面编译它