资讯专栏INFORMATION COLUMN

mpVue配置sass全局变量

didikee / 1544人阅读

摘要:参考了网上的几种方法,我总结了一种最简洁的的方法确保有安装这个包,,,没有的话就安装修改的配置文件修改处开始此路径就是你定义全局变量的路径,可随你自己的更改修改处结束重新运行一下就了。

参考了网上的几种方法,我总结了一种最简洁的的方法:
1、确保有安装这3个包sass-loader,node-sass,sass-resources-loader:,没有的话就安装:

</>复制代码

  1. npm install sass-loader node-sass --save-dev
  2. npm install sass-resources-loader --save-dev

2、修改mpvue的配置文件build/utils.js

</>复制代码

  1. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  2. return {
  3. css: generateLoaders(),
  4. wxss: generateLoaders(),
  5. postcss: generateLoaders(),
  6. less: generateLoaders("less"),
  7. sass: generateLoaders("sass", { indentedSyntax: true }),
  8. scss: generateLoaders("sass"),
  9. // 修改处-开始
  10. scss: generateLoaders("sass").concat(
  11. {
  12. loader: "sass-resources-loader",
  13. options: {
  14. resources: path.resolve(__dirname, "../src/assets/_macro.scss")// 此路径就是你定义全局scss变量的路径,可随你自己的更改
  15. }
  16. }
  17. ),
  18. // 修改处-结束
  19. stylus: generateLoaders("stylus"),
  20. styl: generateLoaders("stylus")
  21. }
  22. }

重新运行一下就ok了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102386.html

相关文章

  • mpvuesass全局变量配置

    摘要:安装修改根目录下添加该项修改相应路径添加该项修改修改 安装loader cnpm i sass-loader sass-resources-loader --save-dev 修改根目录下/build/utils.js var path = require(path) var config = require(../config) var ExtractTextPlugin = ...

    zhongmeizhi 评论0 收藏0
  • 珠峰前端架构师培养计划

    摘要:公司的招聘要求都提到了至少熟悉其中一种前端框架,有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型,并来说说选其技术的几大优势。技术的优势互联网前端大潮后,前端出现了大框架,分别是与。 1、技术选型的背景前端技术发展日新月异,互联网上出现的新型框架也比较多,如何让新招聘的人员...

    ccj659 评论0 收藏0
  • mptosat,一个基于mpvue的toast弹窗组件

    摘要:介绍是一个基于的简单弹窗组件地址特性轻量目前整个项目未打包前大概只有行代码包括注释,左右包括图标配置少尝试过无数种优化方法,只为减少配置冗余少每个页面只需要引入一次,该页面里面如果有多个子组件,可以跟页面共用一个,无需重复引入。 介绍 mptoast 是一个基于mpvue的简单弹窗组件 github地址:https://github.com/noahlam/mpvue-toast 特...

    remcarpediem 评论0 收藏0
  • 微信小程序mpvue框架总结

    摘要:原理架构作为与之间相互通信的桥梁部分在环境中注入的实现代码,包含了协议的拼装发送参数池回调池等一些基础功能。部分在客户端中的功能映射代码,实现了拦截与解析环境信息的注入通用功能映射等功能。 原理架构 JSBridge 作为native 与 JS 之间相互通信的桥梁JS部分(bridge): 在JS环境中注入 bridge 的实现代码,包含了协议的拼装/发送/参数池/回调池等一些基础功能...

    microelec 评论0 收藏0

发表评论

0条评论

didikee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<