0

I have used vue cli to create a custom vue project. I included router and vuex. I have bootstrap.min.css and styles.css in src/assets/css/

in my App.vue styles tag I use the following:

@import './src/assets/css/bootstrap.min.css'; @import './src/assets/css/styles.css';

when I do npm run serve, these files are served as html. It feels like I have tried a million variations of this import path but nothing works. I have wrapped it in a URL, I have 'required' it in main.js. Nothing works.

JTInfinite
  • 360
  • 4
  • 14
  • try change path to `@import ‘~@/assets/css/bootstrap.min.css’` , if file does't exists, your terminal should output some errors. – joaner Jun 23 '18 at 14:04
  • This answer might help you more https://stackoverflow.com/a/24102070/336392 If you run the app through a http server like nginx there's even more config to do. – Thomas R. Koll Jun 23 '18 at 14:59
  • check how I did it here: https://github.com/syed-haroon/vue-cli3-starter-template – Syed Jun 23 '18 at 17:00

2 Answers2

0

This should work if you are pulling it from node_modules:

@import "~bootstrap/scss/bootstrap";

check how I did it here.

Syed
  • 15,657
  • 13
  • 120
  • 154
0

I tried importing the files in my main.js file instead of the app.vue tags and noticed errors along the lines of 'couldn't find modules … /assets/img/bg1.jpg' etc etc. Turns out that all the asset path within my styles.css files needed correcting before it would work.

Thanks to everyone who assisted!

JTInfinite
  • 360
  • 4
  • 14