seo Question posted in
Some basic information to get you started with this can be found here.

Importing local css and js files from bootstrap theme to nuxt.js config – SEO

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:UsersUser55DocumentsUS-kratomUS-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:UsersUser55DocumentsUS-kratomUS-Kratomserver/**/*
[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:UsersUser55DocumentsUS-kratomUS-Kratom.nuxtcomponents'
(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

Tags:

2

Answers


  1. 0

    The trick is you have to put your css in the static folder, then you can import it this way:

    /*
   ** Global CSS
   */
  css: [
    '~/static/css/style.css'
  ],
    Login or Signup to reply.
  2. 0

    I think the script array should be like this, inside the head object:

     /*
 ** Global CSS
    css: ['@/assets/styles/main.css'],
 */
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search