How to add css styles to components in vue

How vue adds CSS styles to components: First set the relevant code in the [.vue] file; then create a new [index.js] file and create the corresponding [record.scss] file.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6, Dell G3 computer.

【Recommended related articles: vue.js】

Vue’s method of adding CSS styles to components:

First, set the following settings in the .vue file:

<template src="./record.html"></template>
<script src="./record.js"></script>
<style src="./record.scss"></style>

Create a new index.js file as follows:

import record from './record.vue';
export default record;

Create the corresponding record.html and record.js , record.scss file, take .js as an example:

// -- NAME --
const name = 'record';
// -- DATA --
const data = function () {
  return {
    
  };
};
// -- COMPUTED --
const computed = {
 
};
// -- COMPONENTS -- 
const components = {
}
// -- WATCH --
const watch = {
  
};
// -- METHODS --
const methods = { 
  
};
// -- HOOKS --
function mounted() {
}
// == EXPORT ==
export default {
  name: name,
  data: data,
  components: components,
  computed: computed,
  watch: watch,
  methods: methods,
  mounted: mounted
};

Another method can be quoted directly:

<template>
  <div>html</div>
</template>
<script src="./***.js"></script>
<style src="./***.css"></style>

There are various forms, but the basic idea is to separate independent files , introduce loading

Related free learning recommendations: javascript (video)

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