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>
相关推荐
Y4090012 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
笑衬人心。4 分钟前
TCP 拥塞控制算法 —— 慢启动(Slow Start)笔记
笔记·tcp/ip·php
花海如潮淹17 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
Andy杨1 小时前
20250718-5-Kubernetes 调度-Pod对象:重启策略+健康检查_笔记
笔记·容器·kubernetes
杭州杭州杭州7 小时前
Python笔记
开发语言·笔记·python
软件2059 小时前
【vue3主题切换】
vue
谢白羽10 小时前
jenkins搭建笔记
运维·笔记·jenkins
xiaoli232710 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
吃西瓜不吐籽_12 小时前
Mac 安装及使用sdkman指南
java·笔记