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

nuxt import css from node_modules
bootstrap-vue nuxt
nuxt scss
nuxtjs
nuxt mysql
nuxt js website
nuxt js vue 3
nuxt-forms

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?

For me the best way if you are using scss

As for me i create a sass directory inside assets directory in nuxt.

Then i add app.scss file inside sass directory i just created.

Then inside app.scss i import the following: @import "bootstrap-variable-override"; @import "~bootstrap/scss/bootstrap.scss";

Then i do yarn add node-sass sass-loader --save

After that in nuxt.config.js i modify css array to include my app.scss

  css: [
    '@/assets/sass/app.scss'
  ],

This will compile whatever scss i will write and import in app.scss and provide as a compiled css.

But if you are bootstrap-vue then all you need to do is add this as modules:

  modules: ['bootstrap-vue/nuxt']

The proper way to include Bootstrap in Nuxtjs? · Issue #1417 · nuxt , How to add Bootstrap to Nuxt and customize the SCSS… into NuxtJS for a project and one of the key elements is getting Bootstrap integrated with a custom theme. There are obviously right ways and wrong ways to do this, and I wanted to Include the bootstrap module in nuxt.config.js bootstrap.css' Include the bootstrap module in nuxt.config.js At the root of your project is the nuxt.config.js file. This defines inclusions and configuration information. \\bootstrap.css’ added in

I use this solution, works like a charm and is the best one in my opinion, fast and easy, follow these steps:

1 .Install bootstrap-vue

 npm i bootstrap-vue

2.Create the file plugins/bootstrap-vue.js and in it type:

/* eslint-disable import/first */
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

3.Add created plugin to nuxt.config.js ... plugins: [ '@/plugins/bootstrap-vue', ], ...

After these steps it should work and you can use bootstrap.

Customize Bootstrap in Nuxt - JavaScript in Plain English, How to add external CSS and JS to your Nuxt.js App. Po Rith. Follow. May 17, 2019 · 1 min read. It's not exactly clear how you can add external CSS and JS to your Nuxt.js project. type: "text/css", href: "https://stackpath.bootstrapcdn.com/​bootstrap/4.2.1/css/bootstrap.min.css" } ],. 3. Thank you — good luck, and have fun! The proper way to include Bootstrap in Nuxtjs and so no. Wondering what the best way to do that is with @nuxtjs/bootstrap-vue. nuxt.js is a fantastic project

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.

Quick: Add Bootstrap 4 to your Nuxt.js App - Po Rith, example-global-css. 131.1k. 1. 65. Edit Sandbox. Files. assets. css. pages. about.​vue. index.vue. README.md. nuxt.config.js. package.json. Dependencies. To see how to include icons via the Nuxt.js module, refer to the Icons section below. Using custom Bootstrap SCSS If you are using custom Bootstrap SCSS, you can disable automatic inclusion of Bootstrap and BootstrapVue pre-compiled CSS files by setting the following option(s) to false :

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 
]

},

Global CSS, You can include your external resources in the head object or function. '​stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' } ] } }  *Note, you do not have to include whole Bootstrap Framework, just to be able to use their reset or grid. They come as separate files… Best Practices. Now, that I’ve prepared you and explained each option that Bootstrap offers, let’s dive in deeper.

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'}
]

How to use external resources?, Bootstrap v4 CSS employs a handful of important global styles and settings that or rollup.js, you may prefer to directly include the package into your project. and BootstrapVue pre-compiled CSS files by setting the following option(s) to false : Note: Optimal tree shaking only works when your Nuxt.js app is in production  Alternate Way. An alternate mechanism you might want to consider using is to place @import statements in your application level CSS file, typically this is styles.css in an Angular CLI project. This works best if you are referencing external files (URLs) or files that you can access from your resources directory.

Getting Started, Zeeshan Chawdhary demonstrates how to use Bootstrap with Vue.js, using Bootstrap has become a popular HTML/CSS framework for building mobile However, there are at least a couple of good projects that are in the let's also look at the simpler option: including Bootstrap-Vue using a script tag in  First, let’s start with generating a new Angular project. The easiest way to do so, is to use the Angular Command Line Interface (CLI) to geneate a new project. The Angular CLI project can be found at https://cli.angular.io/. First you need to make sure that Angular CLI is installed on your system.

Integrating Bootstrap with Vue.js Using Bootstrap-Vue, The Bootstrap 4 beta is “right around the corner,” and I'm sure there are plenty import 'bootstrap-vue/dist/bootstrap-vue.css'; Vue.use(BootstrapVue); new NOTE: You don't need to worry about including Bootstrap's JS,  You will have the stylesheets order like this, first you will include bootstrap css, then your stylesheet file. Why is that? Because that way you can overwrite the classes from the framework without using !important. You can write your own classes and include them in your layout, you can use bootstrap classes and make adjustments to them as you

Using Bootstrap 4 with Vue.js, This tutorial shows how to easily create an application in Nuxt.js integrated with MDB Vue. Nuxt.js installation. The easiest way to start is to use npx or yarn. Make sure You cd my-project npm run dev. or npm install mdbvue bootstrap-​css-only. or. yarn add Is there a way to include Notify like this: ```. It could guide users in a clear and logical structure to get information in a quick way. While taking advantage of the navigation bar template is also a quick method on websites and apps building. Here Mockplus team has complied 30 best Bootstrap navbar templates, hoping to help you on quick and effective website building in 2020. 1.

Comments
  • Where in my code should I put this line? When i paste it to nuxt.config.js or pages/index.vue I got error "Syntax Error: Unexpected token (3:0)" It for symbol '@' If I remove '@' from start of line I got another error "This relative module was not found:"
  • Paste it within assets/main.css
  • I maked as you tell, but it not worked for me. Details see in question update. Thanks!
  • @MikaS, I updated my question and after this post comment. But now I not see my question update. May be moderators remove it?
  • @tolyan You tried to edit this answer, rather than your own question. The edit was not approved, which is why you don't see it.