Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to introduce css into vue components". In daily operation, I believe many people have doubts about how to introduce css into vue components. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about how to introduce css into vue components. Next, please follow the editor to study!

First of all, an vue file (whether it's the main page or a component) consists of three tags, namely, and, in which is the code snippet of html. Inside is the script file, and inside is the style file (shown in the following code).

Home page import Menu from "@ / components/FixMenu.vue" export default {data () {return {};}, components: {Menu}, computed: {}, mounted () {}, methods: {}}

As long as you write the style of the corresponding element in, you can add styles to the html code in.

Alternatively, you can use @ import to reference external css files in. As shown in the following code (the following code shows the method of import and the method of writing css directly in style, in addition, the code is not complete and scss is enabled):

@ import ".. / assets/css/cropper.css"; .fix-menu-wrap {height: 0.98; margin-top: 0.1;}. Fix-menu {background: # fff; width: 7.5; height: 0.98; box-shadow: 0-0.02rem 0.1rem rgba (55, 55, 55, 0.1); position: fixed; left: 50%; bottom: 0; margin-left:-3.75; a {float: left Width: 25%; height: 0.98; text-align: center; font-size: 0.24; color: # 838a96;} I {display: block; width: 0.6; height: 0.6; overflow: hidden; margin: 0 auto; background: url ("~ @ / assets/img/ico-menu.png") no-repeat; background-size: 400% 200% } .sort {background-position: 33.34% 0;} .sift {background-position: 66.67%;} .my {background-position: 100%;} .on {color: # 333; .home {background-position: 0 100%;} .sort {background-position: 33.34% 100%;} .sift {background-position: 66.67% 100% } .my {background-position: 100% 100%;}} at this point, the study on "how to introduce vue components into css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.