vue3 学习笔记03 – scss的使用

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

• 安装依赖

npm install -D sass sass-loader

• 配置scss支持

export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {//define global scss variablescss: {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文件中使用

<template><div class="box"><span>666</span></div>
</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>