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>
相关推荐
汇能感知12 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun12 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao12 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾12 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
赵得C13 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
DKPT13 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
ST.J13 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin14 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全
叫我阿柒啊14 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
小憩-14 小时前
【机器学习】吴恩达机器学习笔记
人工智能·笔记·机器学习