vue-cli 3 import 'bootstrap/dist/css/bootstrap.css' error

0
votes

I am converting an existing Vue project to vue-cli 3 and have run into an unexpected problem:
In a .js file, I get this error (when I run npm run serve) for the line import 'bootstrap/dist/css/bootstrap.css';

error: 'bootstrap' should be listed in the project's dependencies. Run 'npm i -S bootstrap' to add it (import/no-extraneous-dependencies) at src\main.js:19:1:

Which I don't understand, because my package.json already has bootstrap:

"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"jquery": "^3.3.1",
"popper": "^1.0.1",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"

},

The vue-cli doc mentions using a tilde to mean "import from a node module", so I also tried 

import '~bootstrap/dist/css/bootstrap.css';

-- and got the same error.

1
vue.jsbootstrap-4vue-cli-3
Your import looks fine. What else do you do in the main.js file? – Bennett Dams
In my previous setup (before trying to switch to vue-cli 3), my webpack config listed "main.js" as my application "entry:". – Mark L.
I wanted to answer Bennett's question by inserting the top lines of main.js here, but StackOverflow won't let me.... grrr. In summary, main.js imports a bunch of stuff: Vue, Vuex, VueRouter, and a half-dozen Vue components. It defines the Vuex store. And it does "new Vue()" to replace the "app" element (in index.html) with the router and to specify the store. – Mark L.
Did you try to delete the whole node_modules folder and run npm install afterwards? – Bennett Dams
Yes, that did solve the problem. Thanks! (And it's strange, because I previously did "npm install" and checked that that file existed.) – Mark L.

1 Answers

0
votes

Problem solved by deleting node_modules and running "npm install" again.