This is my first nuxt.js project and just purchased a boostrap theme to use along with my app so far. The issue is, I'm not really sure how to use this theme as I am more familiar with regular Vue.
I seem to have figured out how to add a single css stylesheet to the config, but when I add more than one, the app breaks.
I have tried adding the local src path this way:
/*
** Global CSS
*/
css: [
{src:'/assets/main/Unishop/template-1/dist/css/styles.min.css'}
],
/*
I have tried adding the source path to the link section of config and I finally have tried it this way with success:
/*
** Global CSS
*/
css: [
'~/assets/main/Unishop/template-1/dist/css/styles.min.css'
],
/*
However, I need to load what seems like two stylesheets in order to get this working. This is the content of <head> in my themes index.html file:
<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>
The full repo can be cloned/inspected here:
https://github.com/SIeep/US-kratom
If I try to add more than one stylesheet I receive this message in bash:
$ npm run dev
> [email protected] 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
Please let me know if I need to provide any additional information. Thank you!
Update:
Just realized the /dist folder for the bootstrap theme I am using in my assets folder is not being committed to Github so that doesn't help anyone trying to look at the repo or clone it. Sorry! Let me know if there's anything I can do to help troubleshooting
