将Vuetify.min.css导入Meteorjs应用程序时出错



有没有办法将Vuetify与VueJs和MeteorJs集成,这样我就可以使用它的预构建组件了。我曾尝试使用以下论坛评论安装Vuetify1.5.19和2.1.7,但在将Vuetify.min.css导入应用程序时出错。。

我错过了什么?

source\index.js:

import './imports/api/methods';
import 'vuetify/dist/vuetify.min.css';
if (Meteor.isClient) 
{
import './imports/client';
} 
else if (Meteor.isServer) 
{
import './imports/server';
import './imports/server/logging';  
}

StackTrace:

W20191102-23:26:31.343(-5)? (STDERR) C:tempvuemeteor2node_modulesvuetifydistvuetify.min.css:1
W20191102-23:26:31.345(-5)? (STDERR) (function (exports, require, module, __filename, __dirname) { @-webkit-keyframes shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}@keyframes shake{59%{margin-left:0}60%,80%{margin-left:2px}70%,90%{margin-left:-2px}}.black{background-color:#000!important;border-color:#000!important}.black--text{color:#000!important;caret-color:#000!important}.white{background-color:#fff!important;border-color:#fff!important}.white--text{color:#fff!important;caret-color:#fff!important}.transparent{background-color:transparent!important;border-color:transparent!important}.transparent--text{color:transparent!important;caret-color:transparent!important}.red{background-color:#f44336!important;border-color:#f44336!important}.red--text{color:#f44336!important;caret-color:#f44336!important}.red.lighten-5{background-color:#ffebee!important;border-color:#ffebee!important}.red--text.text--lighten-5{color:#ffebee!important;caret-color:#ffebee!importa
W20191102-23:26:31.449(-5)? (STDERR) 
W20191102-23:26:31.451(-5)? (STDERR) SyntaxError: Invalid or unexpected token
W20191102-23:26:31.518(-5)? (STDERR)     at createScript (vm.js:80:10)
W20191102-23:26:31.574(-5)? (STDERR)     at fileEvaluate (packagesmodules-runtime.js:336:7)
W20191102-23:26:31.576(-5)? (STDERR)     at Module.require (packagesmodules-runtime.js:238:14)
W20191102-23:26:31.611(-5)? (STDERR)     at Module.moduleLink [as link] (C:UsersAjitGoelAppDataLocal.meteorpackagesmodules.13.0npmnode_modulesreifylibruntimeindex.js:38:38)
W20191102-23:26:31.613(-5)? (STDERR)     at plugins.js (src/imports/plugins.js:1:1)
W20191102-23:26:31.615(-5)? (STDERR)     at fileEvaluate (packagesmodules-runtime.js:336:7)
W20191102-23:26:31.617(-5)? (STDERR)     at Module.require (packagesmodules-runtime.js:238:14)
W20191102-23:26:31.618(-5)? (STDERR)     at Module.moduleLink [as link] (C:UsersAjitGoelAppDataLocal.meteorpackagesmodules.13.0npmnode_modulesreifylibruntimeindex.js:38:38)
W20191102-23:26:31.619(-5)? (STDERR)     at app.js (src/imports/app.js:1:1)
W20191102-23:26:31.620(-5)? (STDERR)     at fileEvaluate (packagesmodules-runtime.js:336:7)
W20191102-23:26:31.621(-5)? (STDERR)     at Module.require (packagesmodules-runtime.js:238:14)
=> Exited with code: 1

package.json:

{
"name": "vue-meteor-demo",
"private": true,
"scripts": {
"start": "meteor run --settings settings.json",
"debug": "meteor run meteor --settings settings.json --inspect-brk=9229"
},
"dependencies": {
"@babel/runtime": "^7.6.3",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link": "^1.2.13",
"apollo-link-http": "^1.5.16",
"aws-sdk": "^2.556.0",
"bcrypt": "^3.0.6",
"core-js": "^3.3.2",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",
"intersection-observer": "^0.6.0",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.15",
"marker-clusterer-plus": "^2.1.4",
"material-design-icons-iconfont": "^5.0.1",
"meteor-node-stubs": "^0.4.1",
"moment": "^2.24.0",
"vue": "^2.6.10",
"vue-apollo": "^3.0.0",
"vue-googlemaps": "^0.1.2",
"vue-meteor-tracker": "^2.0.0-beta.5",
"vue-observe-visibility": "^0.4.6",
"vue-router": "^3.1.3",
"vue-supply": "^0.3.0",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.20",
"vuex": "^3.1.1",
"vuex-router-sync": "^5.0.0",
"winston": "^3.2.1",
"winston-loggly-bulk": "^3.0.1"
},
"devDependencies": {
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"vue-template-compiler": "2.6.10"
}
}

您正试图将css导入服务器代码中。试试这个:

source\index.js:

import './imports/api/methods';
if (Meteor.isClient) 
{
import './imports/client';
import 'vuetify/dist/vuetify.min.css';
} 
else if (Meteor.isServer) 
{
import './imports/server';
import './imports/server/logging';  
}

最新更新