【发布时间】:2019-08-29 14:33:08
【问题描述】:
这是我的第一个 nuxt.js 项目,到目前为止,我刚刚购买了一个 boostrap 主题与我的应用程序一起使用。问题是,我不太确定如何使用这个主题,因为我更熟悉常规 Vue。
我似乎已经知道如何将单个 CSS 样式表添加到配置中,但是当我添加多个样式表时,应用程序会中断。
我试过这样添加本地 src 路径:
/*
** Global CSS
*/
css: [
{src:'/assets/main/Unishop/template-1/dist/css/styles.min.css'}
],
/*
我尝试将源路径添加到配置的链接部分,我终于成功地尝试了这种方式:
/*
** Global CSS
*/
css: [
'~/assets/main/Unishop/template-1/dist/css/styles.min.css'
],
/*
但是,我需要加载看起来像两个样式表的内容才能使其正常工作。这是我的主题 index.html 文件中<head> 的内容:
<head>
<meta charset="utf-8">
<title>Unishop | Universal E-Commerce Template
</title>
<!-- SEO Meta Tags-->
<meta name="description" content="Unishop - Universal E-Commerce Template">
<meta name="keywords" content="shop, e-commerce, modern, flat style, responsive, online store, business, mobile, blog, bootstrap 4, html5, css3, jquery, js, gallery, slider, touch, creative, clean">
<meta name="author" content="Rokaux">
<!-- Mobile Specific Meta Tag-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Favicon and Apple Icons-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<!-- Vendor Styles including: Bootstrap, Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="css/vendor.min.css">
<!-- Main Template Styles-->
<link id="mainStyles" rel="stylesheet" media="screen" href="css/styles.min.css">
<!-- Modernizr-->
<script src="js/modernizr.min.js"></script>
</head>
可以在此处克隆/检查完整的 repo:
https://github.com/SIeep/US-kratom
如果我尝试添加多个样式表,我会在 bash 中收到此消息:
$ npm run dev
> us-kratom@1.0.0 dev C:\Users\User55\Documents\US-kratom\US-Kratom
> cross-env NODE_ENV=development nodemon server/index.js --watch server
[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: C:\Users\User55\Documents\US-kratom\US-Kratom\server/**/*
[nodemon] starting `node server/index.js`
i Preparing project for development 09:30:46
i Initial build may take a while 09:30:46
√ Builder initialized 09:30:46
(node:2140) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, mkdir 'C:\Users\User55\Documents\US-kratom\US-Kratom\.nuxt\components'
(node:2140) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block,
or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:2140) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[nodemon] clean exit - waiting for changes before restart
如果我需要提供任何其他信息,请告诉我。谢谢!
更新:
刚刚意识到我在资产文件夹中使用的引导主题的 /dist 文件夹没有提交到 Github,因此这无助于任何试图查看 repo 或克隆它的人。对不起!让我知道是否有什么可以帮助解决问题的方法
【问题讨论】:
-
你能解决这个问题吗?我在同一条船上。
-
您好!实际上,我认为我从来没有完全工作过。我可能已经让它在一定程度上发挥了作用,但是集成引导主题是如此痛苦,以至于我刚刚切换到常规的 Vue 并在几分钟内完成了所有排序。真希望我能在那个项目中使用 Nuxt,但集成某些引导主题肯定是一个挑战。祝你好运! :) 希望你能比我走得更远。