How to load CSS and js assets inside Vue

Question

I am confused about this part in Vue even after reading the docs. How should I load assets from index.html? I tried referring to assets using different methods, here is the one I am trying now that is still not working

    <link rel="stylesheet" href="../src/assets/css/magnific-popup.css">
    <link rel="stylesheet" href="../src/assets/css/animate.css">
    <link rel="stylesheet" href="../src/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../src/assets/css/slinky.min.css">
    <link rel="stylesheet" href="../src/assets/css/slick.css">
    <link rel="stylesheet" href="../src/assets/css/ionicons.min.css">
    <link rel="stylesheet" href="../src/assets/css/bundle.css">
    <link rel="stylesheet" href="../src/assets/css/style.css">
    <link rel="stylesheet" href="../src/assets/css/responsive.css">

You can't reference the styles from there because those styles in the src folder will be bundled into the final package. If they are static and not imported by your templates/components when building, they are probably better off in the public folder where you can reference them as stated in the docs: cli.vuejs.org/guide/… — Terry
– Terry, Commented Jul 22, 2019 at 13:12
Problem solved, Thank you @Terry . Can you write an answer so I can accept it? — tarek hassan
– tarek hassan, Commented Jul 22, 2019 at 13:26

Terry · Accepted Answer · 2019-07-22 13:33:51Z

2

Further elabourating on my answer: when those CSS files are placed in your src folder, they will only be included in your bundle when they are required by your Vue components, or imported dynamically. Since these are static assets, they should simply be placed in your app's public folder instead, and then you can reference these assets using <%= BASE_URL %> as the root path in your index.html.

The VueJS documentation has more details on how you can do that.

answered Jul 22, 2019 at 13:33

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load CSS and js assets inside Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related