All geek questions in one place

Vue Js 2 includes CSS in the main index.html

I am developing an application for the first time with VueJS 2 + Webpack And I created a style.css file that I want to include globaly in the index.html file in the root of my application

I tried to load it from different folders (src, src / assets, root, src, components, node_modules), but as a result I always get a 404 error for a particular file.

I also tried all kinds of ways .. / src, / src ...,. / Src ... doesn't matter.

What is the correct way to include a style.css file in your project? Where should it be located? And what should I call it?

+5
source share
2 answers

I realized that the local css file can be accessed by the main index.html file if it is located in the "static" folder of the VueJs project

just add the index.html <link rel="stylesheet" type="text/css" href='static/bootstrap.css'> file to the <head> section and you're done.

+8
source

You should not invoke CSS files from Vue components. This does not work, since all Vue components will be embedded in the build.js file. You should include all static files only from index.html .

However, Vue does provide the ability to have styles in the Vue component, use

<style scoped></style> at the end of the .vue file

+1
source

Source: https://habr.com/ru/post/1264411/

More articles:


All Articles