how to include external css & js in nuxt project

Question

how to properly include external css from assets folder in head of nuxt project.

here is what i am doing but when i check source of page and visit the link of css file. it says styles not found.

this is in nuxt.config.js file

    head: {
  title: 'Happy Voyaging Project',
  htmlAttrs: {
    lang: 'en'
  },
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: '' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/bootstrap.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/font-awesome.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/lineicons.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/styles.css' },
    { rel:"stylesheet", type:"text/css", href:'~/assets/css/weather-icons.css' },
  ]
},

this is how it is there when i am visiting source of my project

 <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/bootstrap.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/font-awesome.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/lineicons.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/styles.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="~/assets/css/weather-icons.css">

how to properly work with this

Answer 1

Solution

To include global style sheets in nuxt you have to use the css property in the nuxt config.

nuxt.config.js

export default {
  css: [
    '~/assets/css/bootstrap.css',
    ...
  ]
}

Doc: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-css

Why your sample is not working

During build, your nuxt assets are bundled with webpack, then renamed to a unique name to enable long term caching.

While this path ~/assets/css/bootstrap.css will point to your file in the local file system. It will not resolve in a builded app path. It will more likely look like this /_nuxt/css/bootstrap.f092375.css.

If you still want them to be "external" (which may alter perfs)

Simply put your css files into the static folder, then path will be preserved. But they won't be bundled.

~/static/css/bootstrap.css => /css/bootstrap.css