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切换按钮(切换放入入口文件中就行)

• 如果想要全局引入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