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>
相关推荐
陈洪奇1 小时前
注册中心学习笔记整理
笔记·学习
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
兴趣使然_5 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
aramae6 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
fen_fen7 小时前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib
普宁彭于晏9 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
饕餮争锋10 小时前
设计模式笔记_创建型_建造者模式
笔记·设计模式·建造者模式
萝卜青今天也要开心11 小时前
2025年上半年软件设计师考后分享
笔记·学习
吃货界的硬件攻城狮11 小时前
【STM32 学习笔记】SPI通信协议
笔记·stm32·学习