Vue3 -- 集成sass【项目集成5】

集成sass：

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

javascript 复制代码

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

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

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

清除默认样式：

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

javascript 复制代码

/**
 * 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全局变量。

javascript 复制代码

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

测试全局变量安装：

ok没问题。

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