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.vuefile:

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:

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!