安装插件
npm install sass --save-dev
在src文件夹下创建styles文件夹,并创建以下文件index.scss:scss的入口文件
// 引入清除默认样式@import './reset.scss';
reset.scss:清除样式文件
/*** ENGINE* v0.2 | 0615* 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;}
variable.scss：scss的全局变量
// 配置scss全局变量$color:red
在mian.ts文件引入scss
import '@/styles/index.scss'
配置vite.config.ts文件
export default defineConfig({plugins: [vue()],// scss全局变量配置css: {preprocessorOptions: {scss: {javascriptEnable: true,additionalData: '@import "./src/styles/variable.scss";'}}}})
案例代码
<template><div><h1>测试代码</h1></div></template><script setup lang="ts"></script><style scoped lang="scss">div {h1 {color: $color;}}</style>
由于引入了reset.scss清除样式，所以就没有h1的效果了，可以把reset.scss样式去掉感受效果$color就是variable.scss中配置的全局变量
