vue——scss变量全局使用

爱被打了一巴掌 2022-10-04 15:42 406阅读 0赞

vue——scss变量全局使用

1.终端安装sass-resources-loader

  1. npm install sass-resources-loader --save

2.vue.config.js注册

最重要，不然报错SassError: Undefined variable.

  1. module.exports = { 
  2.   outputDir: 'ts-platform',
  3.   css: { 
  4.     loaderOptions: { 
  5.       sass: { 
  6.         prependData: '@import "./src/style/variables.scss";'
  7.         // 报错 ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
  8.         //则改为 data: '@import "./src/style/variables.scss";'
  9.       }
  10.     }
  11.   }
  12.  }

3.构建scss变量文件variables.scss

我的主要是主题颜色

  1. $navBack: #3D3D3D;
  3. $menuBack: #3D3D3D;
  4. $menuText: #fff;
  5. $menuSelect: #FFCB1F;
  7. $logoText: #FFCB1F;
  9. $loginBtn: #FFCB1F;
  10. $loginBtnText: #3D3D3D;
  12. $loginOut: #EBB964;
  14. $footText: #fff;
  15. $footTextLogin: #3D3D3D; :export { 
  16.   navBack: $navBack;
  17.   menuBack: $menuBack;
  18.   menuText: $menuText;
  19.   menuSelect: $menuSelect;
  20.   logoText: $logoText;
  21.   loginBtn: $loginBtn;
  22.   loginBtnText: $loginBtnText;
  23.   loginOut: $loginOut;
  24.   footText: $footText;
  25.   footTextLogin: $footTextLogin
  26. }

4.main.js中全局引入

  1. import './style/variables.scss'

5.页面使用css

  1. <style lang="scss">
  2.     background: $menuBack;
  3. </style>

发表评论

表情：
评论列表 （有 0 条评论，406人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue 使用全局变量

    vue 使用全局变量 使用vue中的组件进行请求的时候免不了需要设置baseURL。但是这个baseURL最好不要写在某个全局的vue组件中。如果写到一个组件中的话，打包

    缺乏、安全感缺乏、安全感/ 0 赞/ 390 阅读

    相关 vue 使用less全局变量

    我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less 全局文件是有必要的，那如何在vue中使用呢？ 我首先尝试着把co

    向右看齐向右看齐/ 0 赞/ 582 阅读