vue3 学习笔记03 -- scss的使用

皮卡穆2024-07-12 9:10

vue3 学习笔记03 -- scss的使用

项目中结合 SCSS 可以很方便地管理样式

安装依赖

npm install -D sass sass-loader
配置scss支持

ts 复制代码

export default defineConfig({
  plugins: [vue()],
   css: {
    preprocessorOptions: {
        //define global scss variable
        scss: {
          javascriptEnabled: true,
          additionalData: `
            @import "@/styles/mixins.scss";
          ` // 全局变量导入
        }
      }
   },
  server:{
    host: '0.0.0.0' // 允许IP访问
  },
   resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
})

在src/styles下新建通用scss文件

mixins.scss(将公共的CSS提取出来，可以简化CSS的编写,定义全局的 SCSS 变量和 mixin)

scss 复制代码

    $color: red;
    // 背景图片
    @mixin imageURL($path) {
        background-image: url($path);
        background-repeat: no-repeat;
        background-size:100% 100%;
    }
    // 设置盒子宽高
    @mixin box-width($width: 100%, $height: 100%) {
        width: $width;
        height: $height;
    }
    // 设置超出隐藏
    @mixin text-overflow {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        vertical-align: bottom;
    }
    @mixin text-overflow-two {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
    }

base.css（设置通用样式）

复制代码

    // 页面主色，包含按钮文字等
    :root {
        --vt-c-white: #ffffff;
        --vt-bg-color: #f0f0f0;
        --vt-border-color: #d6d5d5;
        --vt-border-disabled-color: #C7CFD5;
        --vt-main-color: #000000;
        --vt-card-bg-color: #dfdfdf;
        --vt-dialog-bg-color: #ffffff;
        --vt-dialog-model-bg-color: rgba(0,0,0,0.3);
        --vt-carouse-bg-color: #1a1a1a;
        --vt-main-bg-color: #007cdb;
        --vt-main-danger-bg-color: #ff5a5a;
        --vt-main-base-bg-color: #1c1d1e;
        --vt-main-warning-bg-color: #b7b7b7;
        }
    
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        font-weight: normal;
    }
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
        outline: none;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    html,
    body {
        width: 100%;
        height: 100%;
    }

element.scss(主要修改公共的elementplus下组件的样式)

main.css

复制代码

    @import './base.css';
    @import './element.scss';

在main.ts中引入
复制代码
```
  import '@/styles/main.css'
```
vue文件中使用