标签：scss vue menuSelect variables 3D3D3D loginOut menuBack 全局

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>

标签：scss,vue,menuSelect,variables,3D3D3D,loginOut,menuBack,全局
来源： https://blog.csdn.net/Juliet_xmj/article/details/118670997

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。