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