Menu
Please I have been trying to import local styles and javascript files into my newly created VUE-CLI 3 application (inside public/index.hml) but they are not reflecting in my components.
Using Vue-cli 2 it works.
Are we not supposed to import css and styles in public/index.hml Please how do i get this to work? Please help.
See below how i referenced the files in public/index.html file
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-cameleon</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<!-- Common CSS -->
<link rel="stylesheet" href="../src/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="../src/assets/fonts/icomoon/icomoon.css" />
<link rel="stylesheet" href="../src/assets/css/main.css" />
<!-- Other CSS includes plugins - Cleanedup unnecessary CSS -->
<!-- Chartist css -->
<link href="../src/assets/vendor/chartist/css/chartist.min.css" rel="stylesheet" />
<link href="../src/assets/vendor/chartist/css/chartist-custom.css" rel="stylesheet" />
920
You have SCSS variables in one file that you want to make available to your Vue components. The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue's single file components you can simply add lang="scss" to the <style> block ( docs).
STEP 01: First, Import the Child Component into the Parent Component inside script tag but above export default function declaration. STEP 02: Then, Register the Child Component inside the Parent Component by adding it to components object. STEP 03: Finally, Use the Child Component in the Parent Component Template.
You could import them in the main.js as follows :
import './assets/css/bootstrap.min.css';
import './assets/css/main.css'
....
or in App.vue :
<template>...</template>
<script>...</script>
<style src='./assets/css/bootstrap.min.css'></style>
<style src='./assets/css/main.css'></style>
Using the vue-cli v4, go to your main.js file and add the imports of your js/css files like this
import './assets/main.js'
import './assets/main.css'
And make sure you have put those file in the assets folder of your project!
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
