CODEWITHSUNDEEP
webpackvuejs2vue-cli
jrpikong
jrpikong

Reputation: 61

Vue-CLI with webpack add external Css and Js file

I use Vue-cli with webpack, and I have problem to call external js and css file in index.html.

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>gradana</title>
    <link rel="stylesheet" href="./src/assets/css/hello.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

If I run the code I have error.

enter image description here

Cannot GET /src/assets/css/hello.css

Upvotes: 3

Views: 4211

Answers (1)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

As you are using vue cli, assets folder will be handled by webpack during bundling, and those files within assets folder should be included by js

e.g. require('../node_modules/bootstrap/dist/css/bootstrap.min.css').

Or you can simply store CSS or JS files into /static folder, all files within static folder will be added into /dist folder while running app.

enter image description here

and then call it into index.html

CSS

<link rel="stylesheet" href="/static/css/hello.css">

JS

<script src="/static/scripts/script.js"></script>

Upvotes: 2

Related Questions