集成sass：

看过博主的 配置styleLint工具应该已经安装过 sass sass-loader 了，所以我们只需要加上我们的 lang="scss"即可。

<style scoped lang="scss"></style>

给项目添加全局样式文件：

在src文件夹下创建index.scss文件，并在入口文件main.ts文件中引入全局样式。

清除默认样式：

在npm官网中寻找reset.scss文件

/*** ENGINE* v0.2 | 20150615* License: none (public domain)*/*,*:after,*:before {box-sizing: border-box;outline: none;}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {font: inherit;font-size: 100%;margin: 0;padding: 0;vertical-align: baseline;border: 0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}body {line-height: 1;}ol,ul {list-style: none;}blockquote,q {quotes: none;&:before,&:after {content: '';content: none;}}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sup {top: -.5em;}sub {bottom: -.25em;}table {border-spacing: 0;border-collapse: collapse;}input,textarea,button {font-family: inhert;font-size: inherit;color: inherit;}select {text-indent: .01px;text-overflow: '';border: 0;border-radius: 0;-webkit-appearance: none;-moz-appearance: none;}select::-ms-expand {display: none;}code,pre {font-family: monospace, monospace;font-size: 1em;}

并把它在index.scss文件中引入

测试清除默认样式：

默认边距等清除成功，清除样式生效。

设置scss的全局变量：

scss的变量是 $ ,我们可以在index.scss中设置一些全局变量。

我们发现使用的话会报错，这样的配置是没有办法直接使用的：


所以我们需要给scss配置全局变量；

在style/variable.scss创建一个variable.scss文件后，在vite.config.ts中配置scss全局变量。

 css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";',},},},

测试全局变量安装：

ok没问题。

请记得：scss的变量是使用 $，less的变量是使用 @ 符号！！