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

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文件中使用

    <template>
    666
    </template> <script lang="ts" setup></script> <style lang="scss" scoped> .box { @include box-width(80px,80px); background: $color; span { color: var(--vt-c-white); } } </style>
相关推荐
使一颗心免于哀伤8 小时前
《设计模式之禅》笔记摘录 - 21.状态模式
笔记·设计模式
_落纸2 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha2 天前
SpringBoot
笔记·学习
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Grassto3 天前
RAG 从入门到放弃?丐版 demo 实战笔记(go+python)
笔记
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
周周记笔记3 天前
学习笔记:第一个Python程序
笔记·学习
丑小鸭是白天鹅3 天前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin