How to reference separate style files when using Vue single-page application

This time I will show you how to use Vue single-page applications. Reference separate style files. What are the precautions when using Vue single-page applications to reference separate style files? The following is a practical case, let’s take a look.

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, which means that 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: '<app></app>',
 components: { App }
})

Method 2

Introduce style files into a certain .vue

<template>
  ...
</template>
<script>
  export default {
    name: "test"
  }
</script>
<style>
 @import "style.css";
</style>

The file organization format is as follows:

Application in the project

In my project, both methods are applied, and the public style adopts the first method. Quote, the second method is used for the style of each module in the project. Each module contains a style file to store the styles required 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 them, you can still write the css style directly in the style tag of the .vue file.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to solve the error problem when Angular5 upgrades RxJS to 5.5.3

Use webpack to automatically refresh and parse Detailed explanation of steps

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