What is best way for including bootstrap.css to nuxt project?

tolyan Source

This is a part of my nuxt.config.js file:

 head: {

 link: [
     { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       // load bootsttrap.css from CDN      
       //{ type: 'text/css', rel: 'stylesheet', href: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' },
     ]
   },
   css: [
     // this line include bootstrap.css in each html file on generate 
     'bootstrap/dist/css/bootstrap.css',
     'assets/main.css'
   ],

In this case bootstrap.css included in each html file on nuxt generate. For resolve it I comment line 'bootstrap/dist/css/bootstrap.css' in css section and uncomment rel stylesheet line in link section.

After this bootstrap.css file loaded from CDN and not included in html files. So, I think it not is very well idea.

How copy bootstrap.css from 'node_modules/bootstrap/dist/...' to '~/assets' on build, and after this, load it from here?

nuxt.js

Answers

answered 9 months ago Steve Hynding #1

If you are looking to centralize your CSS imports (specifically bootstrap from node_modules, in your case) into a single file for Nuxt generating, you could include an at-rule import to your 'assets/main.css' (recommend to update it to '~/assets/main.css') specified in your config.

@import '../node_modules/bootstrap/dist/css/bootstrap.css'

Just a reminder: when you simply run Nuxt in dev mode, the CSS will be injected via JS. When generated, however, Nuxt will create a single, hashed, CSS file as part of the document root directory.

answered 3 months ago Agung Pramono #2

In my case, I put bootstrap.css file in "static" folder, and then register it to the nuxt.config.js as bellow

head: {
title: "Nuxt",
meta: [
  { charset: "utf-8" },
  { name: "viewport", content: "width=device-width, initial-scale=1" },
  {
    hid: "description",
    name: "description",
    content: "Nuxt"
  }
],
link: [
  { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
  { rel: "stylesheet", href: "/css/bootstrap.css" } //Register your static asset 
]

},

answered 2 weeks ago Billal Begueradj #3

In my case, I add it from CDN as an object entry to link array (in nuxt.config.js)

link: [     
    {rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'}
]

comments powered by Disqus