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>
相关推荐
一笑code18 分钟前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
茫忙然18 分钟前
【WEB】Polar靶场 6-10题 详细笔记
笔记
eric*168821 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
Allen_LVyingbo1 小时前
数智读书笔记系列035《未来医疗:医疗4.0引领第四次医疗产业变革》
人工智能·经验分享·笔记·健康医疗
岑梓铭1 小时前
考研408《计算机组成原理》复习笔记,第三章(3)——多模块存储器
笔记·考研·408·计算机组成原理
菜菜why1 小时前
MSPM0G3507学习笔记(一) 重置版:适配逐飞库的ti板环境配置
笔记·学习·电赛·嵌入式软件·mspm0
c7692 小时前
【文献笔记】Automatic Chain of Thought Prompting in Large Language Models
人工智能·笔记·语言模型·论文笔记
X_StarX2 小时前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
智者知已应修善业4 小时前
【51单片机用数码管显示流水灯的种类是按钮控制数码管加一和流水灯】2022-6-14
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
孞㐑¥8 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp