JIYIK CN >

Vue is a popular front-end framework that allows developers to build single-page applications in a componentized way. During the development process, we usually need to introduce style files to beautify the page. This article will introduce several ways to introduce style files in Vue.

1. Import the style file into the component

In Vue, each component can have its own style. We can <style>import the style file in the component's tag. For example:

<template>
  <div class="hello-world">Hello World!</div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style src="./HelloWorld.css"></style>

In the above example, we HelloWorld.vueimport HelloWorld.cssthe style file into the component. Use srcthe property to specify the path of the style file.

2. Introduce the global style file in App.vue

If we want to share styles across the entire application, we can App.vueimport a global style file in . For example:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style src="./assets/global.css"></style>

In the example above, we App.vueimported global.cssthe style file in . This style file will be applied to the entire application.

3. Using CSS Preprocessors

In Vue, we can also use CSS preprocessors to write styles. Common CSS preprocessors include Sass, Less, and Stylus. Using CSS preprocessors allows us to write complex styles more conveniently and improves the maintainability of the code.

Vue supports using Sass and Less in single-file components. If we want to use Sass in a component, we can <style>add lang="scss"the attribute to the tag. For example:

<template>
  <div class="hello-world">Hello World!</div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style lang="scss">
@import "./HelloWorld.scss";

.hello-world {
  color: $primary-color;
}
</style>

In the example above, we use Sass in the component and import HelloWorld.scssthe style file. We also define .hello-worldthe class name and use $primary-colorthe variable to set the text color.

Summarize

The methods for introducing style files in Vue are:

1. Import the style file into the component
2. Introduce the global style file in App.vue
3. Using CSS Preprocessors

Using these methods allows us to manage styles more conveniently and improve the maintainability of the code. In actual development, we can choose different methods to introduce style files according to actual conditions.