vue-cli 3 全局引入scss变量

系统管理员 2023-02-14 06:47 154阅读 0赞

1、安装sass-resources-loader

  1. npm install sass-resources-loader -S

2、在根路径下（package.json同级）新建vue.config.js（如果已经存在，则不用新建）

vue.config.js

  1. module.exports = {
  2.   chainWebpack: config => {
  3.     const oneOfsMap = config.module.rule('scss').oneOfs.store
  4.     oneOfsMap.forEach(item => {
  5.       item
  6.         .use('sass-resources-loader')
  7.         .loader('sass-resources-loader')
  8.         .options({
  9.           // Provide path to the file with resources
  10.           resources: './src/assets/mixins.scss',
  12.           // Or array of paths
  13.           // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
  14.         })
  15.         .end()
  16.     })
  17.   }
  18. }

在src/assets目录下新建mixins.scss

  1. $theme-color: #d1274e;
  3. @mixin border {
  4.     border-radius: 3px;
  5.     border: 1px solid #ededed;
  6. }

在页面中使用$theme-color

  1. <style lang="scss" scoped>
  2.     #nav {
  3.         color: $theme-color;
  4.     }
  5. </style>

npm run serve重启服务验证成功

发表评论

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

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

相关阅读