Overview
When using Vue components, the Vite compiler allows you to use almost any frontend templating language style. The easiest way to enable these expressive library plugins in your Vue templates is to install them when you initialize your project, or by using npm install (or yarn add) for the package.
When using Vue components, the Vite compiler allows you to use almost any front-end template language style. The easiest way to enable these Expression Library plugins in Vue templates is to install them when initializing the project, or install the package using npm install (or yarn add).
When using the style tag inside of a Vue component, you can specify a language using the lang attribute, provided that you have installed that specific language plugin.
When using style tags in Vue components, you can use the lang attribute to specify the language as long as a specific language plugin is installed.
For example, if you chose to install the Stylus preprocessor, first you need to install the stylus package in your project as a dependency by performing the following command:
For example, if you choose to install the Stylus preprocessor, you first need to execute the following command to install the stylus package as a dependency into the project:
npm add -D stylus #OR yarn add -d stylus
Then, you can add the lang=“stylus” attribute to the style tag to begin using Stylus:
Then, you can add the lang="stylus" attribute to the style tag and start using Stylus:
<style lang="stylus"> ul color: #2c3e50; > h2 color: #22cc33; </style>
Another benefit of using Vue is scoping the style with the scoped attribute. This is a useful way to create isolated and component-specific CSS stylings. It also overrides any other CSS global rules, according to the CSS rule of specificity.
Another benefit of using Vue is to define styles using scoped attribute. This is a useful method to create orphaned, component-specific CSS styles. It can also override any other CSS global rules based on CSS specificity rules.
It is not recommended to scope global styles. A common method for defining global styling is to separate these styles into another style sheet and import them into your file.
It is not recommended to set scopes for global styles. A common way to define global styles is to separate these styles into another style sheet and import them into a file.
Now, let’s practice importing SCSS, a pre-processor plugin for CSS, to use in your application, and write some scoped stylings with the following exercise.
Now, let's practice importing SCSS (a preprocessor plug-in for CSS) into the application and write some scope styles through the following exercises.
Exercise: Use SCSS
In this exercise, we will be utilizing the style tag to add SCSS preprocessed styles to a component and importing external stylesheets.
In this exercise, we will use the style tag to add SCSS preprocessing styles to the component and import an external style sheet.
Create a new Vue component file named in the src/components directory.
Create a new Vue component file named src/components directory.
Introduce this component and render:
<script setup> import Exercise from "./components/"; </script> <template> <Exercise/> </template>
Inside , let’s write some HTML that can be styled using SCSS. Let’s keep practicing the interpolation method:
In , let's write some HTML that can be modeled using SCSS. Let's continue practicing interpolation:
<template>
<div>
<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>
<ul>
<li>{{ items[0] }}</li>
<li>{{ items[1] }}</li>
<li>{{ items[2] }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My list component!',
subtitle: 'Vue JS basics',
items: ['Item 1', 'Item 2', 'Item 3']
}
},
}
</script>Add the sass SCSS package as a project dependency:
Add the sass SCSS package as a project dependency:
npm install -D sass # ornpm add -D sass # oryarn add sass
Add the lang attribute to the style tag and add the scss value to enable SCSS syntax inside the style block:
Add the lang attribute in the style tag and add the scss value to enable SCSS syntax in the style block:
<style lang="scss"></style>
Create a folder inside the src/ directory called styles. Inside this new folder, create a file called .
Create a folder named styles in the src/ directory. In this new folder, create a file named .
Inside , add some styling for the template you composed in your component, such as defining color variables (green, grey, and blue) to reuse in different areas of related CSS rules, and some CSS styles for h1, h2, and the list elements:
In, add some styles to the templates in the component, such as defining color variables (green, gray, and blue) for reuse in different areas of the relevant CSS rules, and add some CSS styles for h1, h2, and list elements:
/* */
$color-green: #4fc08d;
$color-grey: #2c3e50;
$color-blue: #003366;
h1 {
margin-top: 60px;
text-align: center;
color: $color-grey;
+ h2 {
text-align: center;
color: $color-green;
}
}
ul {
display: block;
margin: 0 auto;
max-width: 400px;
padding: 30px;
border: 1px solid rgba(0, 0, 0, 0.25);
> li {
color: $color-grey;
margin-bottom: 4px;
}
}In SCSS, you can use standard CSS selectors to select elements in your component.
In SCSS, you can use the standard CSS selector to select elements in a component.
ul > li will select every <li> element inside of an <ul> element for styling. Similarly, using the addition symbol (+) means that the elements placed after the first element will be styled if they match the condition. For example, h1 + h2 will dictate that all h2 elements after h1 will be styled in a certain way, but h3 will not. You can understand this better through the following example.
ul > li will select<ul>Each within the element<li>Elements are styled. Similarly, use the plus sign (+) to indicate that if the elements after the first element meet the conditions, then these elements will be styled. For example, h1 + h2 means that all h2 elements after h1 will be styled in some way, but h3 won't. You can better understand this with the following examples.
In CSS, you would present this code as follows:
In CSS, you can render this code using the following code:
h1 + h2 {
/* Add styling */
}
ul > li {
/* Add styling */
}In SCSS, the same code can be represented as follows:
In SCSS, the same code can be expressed as follows:
h1 {
+ h2 {
// Add styling
}
}
ul {
> li {
// Add styling
}
}In your component, import these styles by using the SCSS @import method:
In the component, import these styles using the SCSS @import method:
<style lang="scss"> @import '../styles/'; </style>
Add the scoped attribute to your <style> tag to only apply these styles to this component instance. Use the variable from the $color-blue imported stylesheet:
exist<style>Add scope attributes to the tag so that only these styles are applied to the component instance. Use variables from the stylesheet imported from $color-blue:
<style lang="scss" scoped>
@import '../styles/typography';
h1 {
font-size: 50px;
color: $color-blue; // Use variables from imported stylesheets
}
</style>This is the end of this article about writing styles using SCSS in Vue3. For more related content on writing styles of Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!