Home > Web Front-end > JS Tutorial > body text

Two ways for Vue single-page application to reference separate style files

亚连
Release: 2018-05-28 10:32:45
Original
1380 people have browsed it

This article will introduce to you how to reference a separate style file in a Vue single-page application. This article takes the css file as an example and introduces it to you in two ways in great detail. Friends who need it can refer to it

Problem description

For .vue files, they are also composed of three parts: structure, behavior, and style. There is a scoped attribute in the style part, that is The current page is valid. When there are many styles in the style tag or there are duplications between .vue files, it always feels that it does not look neat enough, so you need to introduce some common styles. Let’s first talk about how to introduce separate style files. Here we take CSS files as an example, and then talk about the division of style files in my project

Introducing separate style files

Method 1

Introduce static resources into main.js. This method makes the style file shared by components in the project

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
// 此处引入静态资源
require('./assets/css/style.css')
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})
Copy after login

Method 2

Introduce style files into a certain .vue

<template>
  ...
</template>

<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
 @import "style.css";
</style>
Copy after login

The file organization format is as follows:

Applications in the project

In my project, both methods are applied. The public styles are referenced in the first method, and the styles of each module in the project are referenced in the second method. In each module, It contains a style file, which is used to store the styles needed in this module. At this time, you need to be more flexible. If there are relatively few styles, or only a certain vue file will use it, you can still write the css style directly in the .vue file. in the style tag.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementation of vue’s keep-alive cache function

Collect url and href of front-end interview questions , src

Use vue-route’s beforeEach to implement the navigation guard (verify login before routing jump) function

The above is the detailed content of Two ways for Vue single-page application to reference separate style files. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!