How to reference css in vue

Vue refers to css methods: 1. Global introduction, the syntax format is "import 'css file address'"; 2. Local introduction, the syntax format is "30e8033e360bcffb1ce9b4703e10b64c@import 'css file address' ;531ac245ce3e4fe3d50054a55f265927”.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, Dell G3 computer.

Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up.

Introduce external css files into vue:

Create a new style folder under the src file of the project to store css files.

1. Global import

Put the external css file under the style file. To introduce external files, just import them in the main.js file.

import './style/reset.css'

I introduced the clear Default style css file

2. Local introduction

<style scoped>
  @import &#39;../assets/iconfont/iconfont.css&#39;;这个分号一定要写，要不会报错
</style>

@import CSS@ rules are used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; because it is not a nested statement, @import cannot be used within a conditional group of rules.

Thus, user agents can avoid retrieving resources for unsupported media types and authors can specify @import rules that rely on media. These conditions import media queries specified after the URI, separated by commas. Without any media queries, the import is unconditional. Specifies that all media have the same effect.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to reference css in vue. For more information, please follow other related articles on the PHP Chinese website!