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

vue3 学习笔记03 – scss的使用

项目中结合 SCSS 可以很方便地管理样式

• 安装依赖

npm install -D sass sass-loader

• 配置scss支持

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)

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