Can't load CSS into Vue cli project. Mimetype is always html

0
votes

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.

2
vue.js
try change path to @import ‘~@/assets/css/bootstrap.min.css’ , if file does't exists, your terminal should output some errors. – joaner
This answer might help you more 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
check how I did it here: github.com/syed-haroon/vue-cli3-starter-template – Syed

2 Answers

0
votes

This should work if you are pulling it from node_modules:

@import "~bootstrap/scss/bootstrap";

check how I did it here.

0
votes

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!