How to Include CSS Files in Vue2 ?
Last Updated :
24 Apr, 2025
VueJS is one of the greatest frameworks for JavaScript similar to ReactJS. The user interface layer is designed with VueJS. When working with Vue2, styling your components is an essential aspect of creating a visually appealing and user-friendly application. In Vue2 you can include CSS files in various ways to apply styles to your components. In this article, we will explore different methods to include CSS files in a Vue2 project.
Steps to Setup the Project Environment
Step 1: Install Vue using the below command
npm install vue@2.x.x
Step 2: Create a VueJS application using the below command.
vue create my-vue-project
Step 3: Navigate to the project that you have just created by this command.
cd your-project-name
Step 4: Start development server
npm run serve
Project Structure:

By importing CSS files inside script tag
In this method the import statement is used within the script section of the Vue component to directly import an external CSS file.
Syntax:
<script>
import "your_CSS_file_path";
</script>
Example: The below JavaScript and CSS will help you in importing the CSS file to your component.
JavaScript
// App.vue file
<script>
import "./style.css";
export default {
name: "#app"
}
</script>
<template>
<h1 class="headings">
GeeksForGeeks
</h1>
<h2 class="heading">
This text is styled by
importing the CSS file
into the component.
</h2>
</template>
<style></style>
CSS
/* style.css */
.headings {
font-family: Arial, sans-serif;
color: green;
line-height: 1.5;
text-align: left;
}
.heading {
color: blue;
}
Output:

By importing CSS files inside style tag
This approach uses the <style> tag within the Vue component to import an external CSS file using the @import rule.
Syntax:
<style>
@import "your_CSS_file_path"
</style>
Example: The below JavaScript and CSS will help you implement the above approach to include CSS file.
JavaScript
// App.vue file
<script>
export default {
name: "#app"
}
</script>
<template>
<h1>
GeeksforGeeks
</h1>
<p>
This is a paragraph with some
<a href="#">text links</a>
</p>
</template>
<style>
@import "./style.css";
</style>
CSS
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
h1 {
color: green;
}
p {
line-height: 1.5;
margin-bottom: 15px;
color: rgb(221, 67, 36);
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Output:

Defining CSS directly inside style tag
Write your CSS rules directly in between the style tags. This approach allows you to specify the visual appearance of your component by applying the color, font size, alignment and other styling attributes directly in the component file.
Syntax:
<styles>
// Your styles
</styles>
Example: The below JavaScript and CSS will help you implement the above method to include CSS file.
JavaScript
// App.vue file
<script>
export default {
name: '#app',
};
</script>
<template>
<div class="main-container">
<h1>Welcome to My Page</h1>
<h1>GeeksforGeeks</h1>
<p>
This is a paragraph with some
<span class="highlight">
highlighted text
</span>.
</p>
<p>
Every item on this page is readonly.
You can not write text inside the
input bar.
</p>
<div class="row">
<div class="column">
<p>Column 1 content</p>
</div>
<div class="column">
<p>Column 2 content</p>
</div>
<div class="column">
<p>Column 3 content</p>
</div>
</div>
<input type="text"
disabled
placeholder=
"Enter your name" />
<button type="button">
Click Me
</button>
</div>
</template>
<style>
body {
font-family: Helvetica, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: green;
}
p {
line-height: 1.5;
margin-bottom: 20px;
}
.main-container {
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}
.highlight {
background-color: #ffffe0;
padding: 10px;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
.column {
flex-basis: 33%;
padding: 10px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
input[type='text'] {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
input[type='text']:focus {
outline: none;
border-color: #007bff;
}
</style>
Output:

Conclusion
In conclusion, integrating CSS styles into your Vue 2 project can be achieved by either using the @import rule inside <style> tags or the import statement within the script section. Both methods offers flexibility in managing and organizing styles allowing you to choose an approach that aligns with your project structure.
Similar Reads
How to include CSS files in EJS View Engine?
Including CSS files is important for styling web pages in web development with Node.js, Express, and EJS. In this article, we will explore the process of including CSS in such projects to enhance the visual appeal and user experience. Approach to include CSS file in EJS:We're building a Node.js web
3 min read
How to Include One CSS File in Another?
Here are the methods to include one CSS file in another:Method 1. Using @import RuleThe @import rule allows you to import one CSS file into another, enabling modularity and reusability of styles.html<html> <head> <link rel="stylesheet" href="styles.css"> </head> <body>
3 min read
How to create instance in Vue.js ?
A Vue.js Instance refers to a Vue constructor's instance in the Vue application. It acts as a container that holds your application's data and methods. Vue.js implements the Component-Based Architecture that enables the generation of these instances, in order to represent and manage individual compo
2 min read
How to load CSS files using JavaScript?
The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link
2 min read
How to Style an Active Link in VueJS ?
In single-page applications effective navigation becomes crucial. In this article, we'll explore how to style active links in Vue.js using the popular routing library, Vue-router. Table of Content Using router-link-exact-active classConditional class bindingSteps to Setup the Project EnvironmentStep
4 min read
How to import a CSS file in React ?
In React applications, styling is a crucial aspect of creating visually appealing and responsive user interfaces. CSS (Cascading Style Sheets) files are commonly used to define styles for React components. Importing CSS files into React components allows developers to apply styles to specific elemen
3 min read
How to Handle Static Assets in Vite?
In Vite, static assets are files such as images, fonts, and other resources that are served directly to the browser. They should be placed in the public directory, which makes them accessible via the root URL. Vite efficiently handles these assets during development and builds them into the final ou
3 min read
How to Initialize Firebase in Vite and VueJS?
Firebase with Vite and Vue Firebase, combined with Vite and Vue, opens up a powerful combination of real-time capability, fast development, and seamless backend integration. Firebase offers a real-time database, authentication, and cloud storage services that vastly reduce having to manage any backe
4 min read
How to use Tailwind CSS with esbuild ?
Tailwind CSS is a utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. An esbuild is a bundler for the web project that brings the build tool for performance enhancement, along with fa
2 min read
How to include css files using NodeJS, Express, and EJS?
CSS stands for âCascading Style Sheetâ. It is used to style web pages. CSS simplifies the process of making web pages presentable. It describes how web pages should look it prescribes colors, fonts, spacing, and much more. Including CSS files is important for styling web pages in web development wit
2 min read