Trying to load static CSS file gives 404 in Vue JS app

Question

I am working on a Vue JS app (version 2.5.17) using the webpack-simple project time, and I am trying to load a static css file in my main App component.

I have the file in:

src/static/reset.css

Then in my main app component template:

<link rel="stylesheet" type="text/css" href="/static/reset.css">

I am serving using npm run dev

However the CSS file returns a 404 error, and I can confirm by trying to access: http://localhost:8080/static/reset.css

My directory structure:

C:.
|   .babelrc
|   index.html
|   output.doc
|   package-lock.json
|   package.json
|   README.md
|   webpack.config.js
|                
\---src
    |   App.vue
    |   main.js
    |   routes.js
    |   
    +---assets
    |   |   logo.png
    |   |   
    |   \---css
    +---components
    |   |   Home.vue
    +---static
    |       reset.css
    |       
    \---store
        |   store.js
        |   
        \---modules
                recipe.js

can you share you directory structure?

IvanS95
– IvanS95

2018-11-21 15:37:32 +00:00
Commented Nov 21, 2018 at 15:37 — IvanS95
– IvanS95, Commented Nov 21, 2018 at 15:37
Edited my post to include directory structure

corycorycory
– corycorycory

2018-11-21 16:13:48 +00:00
Commented Nov 21, 2018 at 16:13 — corycorycory
– corycorycory, Commented Nov 21, 2018 at 16:13

akuiper · Accepted Answer · 2018-11-21 16:31:10Z

1

You can put your css file in the assets/css folder and then import it in main.js by doing import '@/assets/css/reset.css'. Check out How the hell can i include a css file on GitHub for many other varieties.

edited Nov 21, 2018 at 16:31

answered Nov 21, 2018 at 16:17

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

Collectives™ on Stack Overflow

Trying to load static CSS file gives 404 in Vue JS app

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