vue中scss的用法

最新推荐文章于 2024-10-29 17:32:17 发布

一只正在成长的程序猿

最新推荐文章于 2024-10-29 17:32:17 发布

阅读量961

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue scss用法 scss用法 scss

本文链接：https://blog.youkuaiyun.com/weixin_44251396/article/details/97389669

vue 专栏收录该内容

50 篇文章

订阅专栏

vue中scss的用法

1.在`src`文件夹里面新建`assets`文件夹

2.在`asstes`文件夹里面新建`css`文件夹

3.在`css`文件夹里面新建`mixin.scss`和`reset.scss`,如下图

在这里插入图片描述

4.在`app.vue`的mounted里面写

mounted(){
    	// 设置html的font-size
document.addEventListener("DOMContentLoaded", function() {
    const html = document.querySelector("html");
    html.style.fontSize = window.innerWidth / 10 + "px";
});
}

5.用法

哪个页面需要，就在哪个页面引入reset.scss

<style lang="scss" scoped>
	@import "../assets/css/reset.scss";
 	.status {
        position: absolute;
        width: rem(690);
        left: 5%;
        top: 3%;
	}
</style>

assets源码链接