首页 前端知识 Vue scss实现全局字体大小切换

Vue scss实现全局字体大小切换

2024-04-29 11:04:50 前端知识 前端哥 29 240 我要收藏

一、引入scss依赖

npm install node-sass sass-loader sass-resources-loader --save-dev

二、 项目样式引入

  • 创建mixin.scss
$font-size-14: 14px;
$font-size-16: 14px;
$font-size-20: 20px;
@mixin set-font-size($size,$important: false) {
  font-size: $size if($important, !important, null);

  [data-size="0"] & {
    font-size: $font-size-14;
  }

  [data-size="1"] & {
    font-size: $font-size-16;
  }
}
  • .vue切换按钮(切换放入入口文件中就行)
<template>
  <div id="menu">
    <el-button>普通字号</el-button>
    <el-button>大字号</el-button>

    <router-view class="routerView" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  
  methods: {
    
    changeFontSize(val) {
      window.document.documentElement.setAttribute('data-size', val)
    },
    
  }
}
</script>

<style scoped lang="scss">
在使用的文件中引入scss文件
@import "~@/style/mixin.scss";
.box {
    // 默认使用14号字体
  @include add-size($font-size-14);
}
</style>

  • 如果想要全局引入mixin.scss,不想在每个vue文件中都引入,需要在vue.config.js中进行配置
'use strict'
const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}

var webpack = require('webpack')

module.exports = {
  css: {
    sourceMap: false,
    extract: {
      ignoreOrder: true,
      filename: 'css/[name].[hash:8].css',
      chunkFilename: 'css/[name].[hash:8].css'
    },
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/common.scss";@import "@/styles/mixins.scss";`
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'stylus',
      patterns: []
    }
  }
    
  
}

具体配置请看 Vue项目切换主题颜色(mixin + scss

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6200.html
标签
scssrust
评论
发布的文章

@JsonCreator和@JsonValue

2024-05-05 22:05:05

Python 字符串转换为 JSON

2024-05-05 22:05:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!