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

一、引入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