vue——scss变量全局使用
1.终端安装sass-resources-loader
npm install sass-resources-loader --save
2.vue.config.js注册
最重要,不然报错SassError: Undefined variable.
module.exports = {
outputDir: 'ts-platform',
css: {
loaderOptions: {
sass: {
prependData: '@import "./src/style/variables.scss";'
// 报错 ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
//则改为 data: '@import "./src/style/variables.scss";'
}
}
}
}
3.构建scss变量文件variables.scss
我的主要是主题颜色
$navBack: #3D3D3D;
$menuBack: #3D3D3D;
$menuText: #fff;
$menuSelect: #FFCB1F;
$logoText: #FFCB1F;
$loginBtn: #FFCB1F;
$loginBtnText: #3D3D3D;
$loginOut: #EBB964;
$footText: #fff;
$footTextLogin: #3D3D3D;
:export {
navBack: $navBack;
menuBack: $menuBack;
menuText: $menuText;
menuSelect: $menuSelect;
logoText: $logoText;
loginBtn: $loginBtn;
loginBtnText: $loginBtnText;
loginOut: $loginOut;
footText: $footText;
footTextLogin: $footTextLogin
}
4.main.js中全局引入
import './style/variables.scss'
5.页面使用css
<style lang="scss">
background: $menuBack;
</style>