Trying to load static CSS file gives 404 in Vue JS app
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
vue.js vuejs2
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
add a comment |
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
vue.js vuejs2
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
can you share you directory structure?
– IvanS95
Nov 21 '18 at 15:37
Edited my post to include directory structure
– corycorycory
Nov 21 '18 at 16:13
add a comment |
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
vue.js vuejs2
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
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
vue.js vuejs2
vue.js vuejs2
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
edited Nov 21 '18 at 16:13
corycorycory
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
asked Nov 21 '18 at 15:26
corycorycorycorycorycory
297415
297415
can you share you directory structure?
– IvanS95
Nov 21 '18 at 15:37
Edited my post to include directory structure
– corycorycory
Nov 21 '18 at 16:13
add a comment |
can you share you directory structure?
– IvanS95
Nov 21 '18 at 15:37
Edited my post to include directory structure
– corycorycory
Nov 21 '18 at 16:13
can you share you directory structure?
– IvanS95
Nov 21 '18 at 15:37
can you share you directory structure?
– IvanS95
Nov 21 '18 at 15:37
Edited my post to include directory structure
– corycorycory
Nov 21 '18 at 16:13
Edited my post to include directory structure
– corycorycory
Nov 21 '18 at 16:13
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415308%2ftrying-to-load-static-css-file-gives-404-in-vue-js-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
add a comment |
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.
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
add a comment |
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.
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
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.
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
edited Nov 21 '18 at 16:31
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
answered Nov 21 '18 at 16:17
PsidomPsidom
126k1292136
126k1292136
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415308%2ftrying-to-load-static-css-file-gives-404-in-vue-js-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you share you directory structure?
– IvanS95
Nov 21 '18 at 15:37
Edited my post to include directory structure
– corycorycory
Nov 21 '18 at 16:13