vue——scss变量全局使用

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>