Importing .css and cdn's in the index.html file when using vue-cli

0
votes

Hello and hope all are safe, I have a browser reset.css file in /src/assets/css that will be used site wide in my vue project. So I figured would just import it into the /public/index.html via a . However this does not work and I see an error in the console - "The stylesheet http://localhost:8080/src/assets/css/styles.css was not loaded because its MIME type, “text/html”, is not “text/css”." I am using

 <link rel="stylesheet" href="../src/assets/css/styles.css" type="text/css">

in the index.html file. I am using vue-cli3 and was wondering what is the accepted way of applying site wide css rule's and also the proper way of importing CDN link's? I dont see this scenerio addressed in vue-cli documentation. Thanks to all.

1
webpackvue-cli-3

1 Answers

1
votes

href="../src/assets/css/styles.css"

We don't do that here. It's not pratical. /public/index.html is a template that will be processed with html-webpack-plugin(to pack your vue App). During build, asset links will be injected automatically

go to your App.vue file under tag, add the import line before export default

</template>
<script>
import '@/assets/css/styles.css';
.
.
.

if u need scoped styling in components

just add src=[import path above] in <style scoped>

And Vue docs is very well-written. https://cli.vuejs.org/guide/html-and-static-assets.html#html