nuxt3：使用sass（reset.scss、px2rem）

红太狼 2024-03-27 10:38 21阅读 0赞

**一、使用简介**

1.1、技术栈：nuxt3 + ts

1.2、安装：

> pnpm add sass sass-loader -D

1.3、代码中style标签中加入 lang="scss"

![78de5f5684fd4a5ba5a6826f02c7f50a.png][]

1.4、文件后缀为： .scss

![18c917cd62854a22a9300566fff2c2fc.png][]

**二、reset.scss**

代码文件：/assets/scss/reset.scss

$minWitdh:1200px;
    $BaseColor:#666;
    $LinkColor:#06f;
    $HoverColor:#f60;
    $FontSize:14px;
    
    body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p,blockquote,table,th,td,menu{margin:0;padding:0};
    table{border-collapse:collapse;border-spacing:0;table-layout:fixed}
    ul,ol,menu{list-style:none}
    fieldset,img{border:none}
    img,object,select,input,textarea,button{vertical-align:middle}
    input,textarea,select,address,caption,cite,code,dfn,em,i,b,strong,small,th,var,abbr{font-size:100%;font-style:normal}
    caption,th {text-align: left;}
    article,aside,footer,header,hgroup,nav,section,figure,figcaption {display: block;}
    code, kbd, pre, samp, tt { font-family: Consolas,"Courier New", Courier, monospace;}
    address, cite, dfn, em, var,i {font-style: normal;}
    blockquote, q {quotes: none;}
    blockquote:before, blockquote:after,q:before, q:after {content:"";content: none;}
    a { 
        color:$LinkColor; text-decoration:none;cursor: pointer;
        &:link,&:visited, &:active{color: $LinkColor;}
        &:hover, &:focus {color:$HoverColor; text-decoration:underline;outline:none;}
        &,span,i,em,u,strong,b,p,img,ul,li,div,dd,dt,dl,ol,table,th,td,h1,h2,h3,h4,h5,h6,input,textarea,button,small,select {
            cursor: pointer;}
    }
    
    abbr[title], acronym[title] {border-bottom: 1px dotted;cursor: help;}
    
    html {min-width:$minWitdh;overflow-y: scroll;}
    body {font-size: $FontSize;color: $BaseColor;line-height: 2;}
    body,button, input, select, textarea {font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";*font-family:"\5FAE\8F6F\96C5\9ED1";}
    
    h1 {font-size: $FontSize+10;}
    h2 {font-size: $FontSize+8;}
    h3 {font-size: $FontSize+6;}
    h4 {font-size: $FontSize+4;}
    h5 {font-size: $FontSize+2;}
    h6 {font-size: $FontSize;}
    
    hr {border: none;height: 1px;background: lighten($BaseColor,50%);}
    
    .fl {float: left;}
    .fr {float: right;}
    .tl {text-align: left;}
    .tr {text-align: right;}
    .tc {text-align: center;}
    
    .cf:before, .cf:after,.web:before, .web:after,.web_:before, .web_:after {content:"";display:table;}
    .cf:after,.web:after,.web_:after {clear:both;}
    .cf {zoom:1;}
    
    .web {width: $minWitdh;margin-left: auto;margin-right: auto;zoom:1;}
    .web_ {min-width:$minWitdh;width: 100%;zoom: 1;}
    
    .block {display: block;}
    .none {display:none}
    .clear {clear: both; }

**三、sass 定义rem函数**

原理：通过设置根元素的基准值，来响应不同分辨率的屏幕。

assets/scss/global.scss

@use "sass:math";
    @import 'reset';
    
    // 这个值在媒体查询里边动态设置，但是不是很流畅，有待探索
    $fontSize: 37.5;
    
    @function px2rem($px) {
      @return math.div($px, $fontSize) * 1rem;
    }

pages/media.vue

<template>
        <div>
            <h1>media</h1>
            <div class="div1">test</div>
            <div class="div2">test2</div>
        </div>
    </template>
    <script setup lang="ts">
    </script>
    <style scoped lang="scss">
    // 小于1000
    @media screen and (max-width: 1000px) {
        $FontSize: 30px;
        // 失败
        body {
            background-color: red;
        }
        // 成功
        h1{
            color: green;
        }
        // 成功
        .div1{
            font-size: $FontSize;
        }
        .div2{
            font-size: px2rem(60);
        }
    }
    // 1000到1500
    @media screen and (min-width: 1000px) and (max-width: 1500px) {
        $FontSize: 50px;
        // 失败
        body {
            background-color: yellow;
        }
        // 成功
        h1{
            color: green;
        }
        // 成功
        .div1{
            font-size: $FontSize;
        }
        .div2{
            font-size: px2rem(100);
        }
    }
    </style>

经过测试成功，但是不流畅，不推荐。

**四、个人观点**

本文项目pc端与移动端在一个项目，pc直接使用px，移动端使用px2rem，通过sass的函数方法已实现，针对不同分辨率设置rem的基准值。但是，这样个人认为不是很好，不能实时的体现屏幕的变化。欢迎交流指正。

**五、过程记录：**

问题一：

reset.scss、global.scss文件直接在这里引用，样式可以使用，但是变量、函数等不能使用。

![a7add96e7dde41c3bb76396438e34ad8.png][]

尝试在这里引用

![c3b5e5f76f6442d8ab69d4a839fd4964.png][]

出现报错如下图：

![bfdd90cf45e142edaf3cf34b516d7a90.png][]

解决问题：

css: {
                preprocessorOptions: {
                    scss: {
                        additionalData: [
                            '@use "~/assets/scss/global.scss" as *;',
                        ]
                    }
                }
        }

**六、欢迎交流指正，关注我，一起学习。**

**参考链接：**

[关于vue中媒体查询不起效的原因总结 - 爱码帮™分享编程知识和开发经验][vue_ -]

[rem结合scss解决移动端自适应大小\_scss怎么获取根字体大小\_Mo\_zifeng的博客-CSDN博客][rem_scss_scss_Mo_zifeng_-CSDN]

[视频去哪了呢？\_哔哩哔哩\_bilibili][bilibili]

[vue3 + vite引入scss全局变量\_vite additionaldata\_codingFunTime的博客-CSDN博客][vue3 _ vite_scss_vite additionaldata_codingFunTime_-CSDN]

[http://events.jianshu.io/p/c84557b6a903][http_events.jianshu.io_p_c84557b6a903]

[https://www.cnblogs.com/lovewhatIlove/p/16868062.html][https_www.cnblogs.com_lovewhatIlove_p_16868062.html]

[Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0\_Misha韩的博客-CSDN博客][Using _ for division outside of calc_ is deprecated and will be removed in Dart Sass 2.0.0_Misha_-CSDN]

[我自己整理的一份reset.css的scss版 以作记录-腾讯云开发者社区-腾讯云][reset.css_scss_ _-_-]

[Sass: @function | Sass 中文网][Sass_ _function _ Sass]

[78de5f5684fd4a5ba5a6826f02c7f50a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/fdd74f19c6e141c7a948e7c7410b7341.png
[18c917cd62854a22a9300566fff2c2fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1cbe6def02e54e1b9733c3ceae86ffd2.png
[a7add96e7dde41c3bb76396438e34ad8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c4d60892e6094e1e9d71b1c2fffad7c8.png
[c3b5e5f76f6442d8ab69d4a839fd4964.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/94e69467f06c4210a7c1a26e3c8bf550.png
[bfdd90cf45e142edaf3cf34b516d7a90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b659b7f0e4b540cd89867b646fe3b8ae.png
[vue_ -]: http://www.icodebang.com/article/353051
[rem_scss_scss_Mo_zifeng_-CSDN]: https://blog.csdn.net/Mo_zifeng/article/details/82050289
[bilibili]: https://www.bilibili.com/video/BV1Nz411i77K/?spm_id_from=333.337.search-card.all.click&vd_source=704e2597123fc066b03283e82eb866c0
[vue3 _ vite_scss_vite additionaldata_codingFunTime_-CSDN]: https://blog.csdn.net/hktkkkk/article/details/127790768
[http_events.jianshu.io_p_c84557b6a903]: http://events.jianshu.io/p/c84557b6a903
[https_www.cnblogs.com_lovewhatIlove_p_16868062.html]: https://www.cnblogs.com/lovewhatIlove/p/16868062.html
[Using _ for division outside of calc_ is deprecated and will be removed in Dart Sass 2.0.0_Misha_-CSDN]: https://blog.csdn.net/hanchengmei/article/details/128206159
[reset.css_scss_ _-_-]: https://cloud.tencent.com/developer/article/2176978
[Sass_ _function _ Sass]: https://sass.bootcss.com/documentation/at-rules/function