mpvue全局引入sass文件的方法步骤

mpvue工程初始化的时候，使用sass的步骤

1.安装依赖：

npm install sass-loader node-sass --save-dev

2.在.vue文件中的style节点加上lang=”scss”，这样就可以愉快地使用sass进行开发了，无需再webpack.base.config.js中配置loader，webpack会自动识别.scss文件以及.vue中的scss代码。

在使用sass开发的时候，我们经常需要在各个页面使用统一的变量，还有一些方法，这种公共的资源如果不进行特殊处理的话，我们在每个页面都需要@import进来才能使用，当页面多起来的话，后期维护起来可能会有点吃力，这里介绍在mpvue下如何处理sass全局引入sass资源文件的步骤：

1.首先需要安装sass-resource-loader（我这里版本号是1.3.3）：

npm install sass-resources-loader --save-dev

2.然后是找到工程根目录下的build/utils.js文件，我们新增一个loader对象

var sassResourceLoader = {
 loader: 'sass-resources-loader',
 options: {
  resources: [
  path.resolve(__dirname, '../src/assets/variables.scss'),
  ]
 }
 }

resources数组中，放的是需要引入的sass资源文件的路径。

声明对象的位置最好与其他loader同级

3. 然后改写一下generateLoaders函数

// generate loader string to be used with extract text plugin
 function generateLoaders(loader, loaderOptions, anotherLoader) {
 var loaders = [cssLoader, px2rpxLoader, postcssLoader]
 if (loader) {
  loaders.push({
  loader: loader + '-loader',
  options: Object.assign({}, loaderOptions, {
   sourceMap: options.sourceMap
  })
  })
 }
 if (!!anotherLoader) loaders.push(anotherLoader)

 // Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
 }

主要是改了两个地方，就只是加了一个参数，加了一下判断：

最后我们把自定义加上的loader加上去：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于mpvue的小程序项目搭建的步骤

    基于mpvue的小程序项目搭建的步骤

    前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast

  • mpvue跳转页面及注意事项

    mpvue跳转页面及注意事项

    下面先给大家介绍下mpvue跳转页面,具体内容如下所示: 正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路. 第一步就是配置环境之类的...附上官网的quickstart    http://mpvue.com/mpvue/quickstart/ 相信看完官网的教程之后, 你的项目应该已经搭好了.下面说2个小问题的解决办法吧 1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧) build文件夹---

  • mpvue构建小程序的方法(步骤+地址)

    mpvue是一个使用Vue.js开发小程序的前端框架(美团的开源项目).框架基于Vue.js核心,mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验. mpvue你可以使用你熟悉的vue框架语法,双向绑定让你不用再使用wx的this.setData了,你可以使用npm方便的引入第三方了,真的是贫穷限制了我的想象力啊.个人感觉mpvue比wepy更加简单,上手更加方便,mpuve五分钟教程快速构建.

  • mpvue项目中使用第三方UI组件库的方法

    mpvue项目中使用第三方UI组件库的方法

    说明 整理了一份简单的源码,放在github,有需要参考的同学自取~ 简介 微信小程序上线已有一年多时间啦,自美团的mpvue(基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月. 前端技术日新月异,小程序的UI框架也层出不穷. 例如: WeUI: 一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.(github) ZanUI: 有赞移动 Web UI 规范 ZanUI 的小

  • mpvue 单文件页面配置详解

    前言 mpvue 的出现把 vue 的开发体验带到了小程序这个平台中,但其目录结构与传统的 vue 项目却并不完全一致,一个典型的页面包含以下三个文件: index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中 其中,每个页面的 main.js 文件基本都是一致的,可通过mpvue-entry来自动生成(weex 也有类似的处理),而 main.json 我个人认为直接在 vue

  • mpvue将vue项目转换为小程序

    一. mpvue简介 mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架, 从整个 Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力. 使用 mpvue开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: l 彻底的组件化开发能力:提高代码 l 完整的 Vue.js 开发体验 l 方便的 Vuex 数据管理方案:方便构建复杂应用 l 快捷的 webpack 构建机制:自定义构建策略.开发阶段 hotReload l

  • 详解使用mpvue开发github小程序总结

    前言 最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址:https://github.com/cheesekun/wx-github mina坑 scroll-view 高度 可滚动视图区域. 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height. 小程序提供的scroll-view组件,想让他能滚动,就要给他提供一个固定的高度. 我们一般需求是

  • 详解mpvue开发小程序小总结

    最近用mpvue开发了一个小程序,现总结一下碰见的问题及解决方案 1.项目中数据请求用到了fly.io,封装成request.js如下: import wx from 'wx' import Fly from 'flyio' import store from '../store/index' const fly = new Fly() fly.config.baseURL = process.env.BASE_URL fly.config.timeout = 5000 //http 请求拦截器

  • mpvue全局引入sass文件的方法步骤

    mpvue工程初始化的时候,使用sass的步骤 1.安装依赖: npm install sass-loader node-sass --save-dev 2.在.vue文件中的style节点加上lang="scss",这样就可以愉快地使用sass进行开发了,无需再webpack.base.config.js中配置loader,webpack会自动识别.scss文件以及.vue中的scss代码. 在使用sass开发的时候,我们经常需要在各个页面使用统一的变量,还有一些方法,这种公共的资源

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • Node.js连接mongo数据库上传文件的方法步骤

    Node.js连接mongo数据库上传文件的方法步骤

    目录 效果 初始化 model 下创建index.js用于连接数据库时的信息 修改app.js文件里的信息 router下修改user.js文件 创建上传文件保存文件夹 在public下新建一个index.html 用于请求时的主页面 效果 初始化 创建项目文件夹mondo-express 安装包 npm i express-generator -g(作用一键生成项目列表) 在项目文件夹mondo-express用终端打开输入npx express-generator自动生成项目目录 安装包 终

  • Vue中引入样式文件的方法

    一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

  • C++ 遍历某个文件夹下所有文件的方法步骤

    本文主要介绍了C++ 遍历某个文件夹下所有文件的方法步骤,分享给大家,主要给自己留个笔记.. #include<iostream> #include<string> #include<io.h> #include<cstdio> #include<cstdlib> #include<cstring> using namespace std; void fileSearch(string path) { long hFile = 0;

  • Pycharm如何运行.py文件的方法步骤

    Pycharm时一个非常好用的IDE,但是一开始的时候甚至会因为.py文件不能运行而束手无策... 这里需要说明一下Pycharm的作用,Pycharm并不是一个像matlab那样什么都自己提供的软件,它更像一个非常棒的搭桥软件:将Python和.py文件连接在一起.所以当你发现.py文件不能运行时,多半是因为.py文件的路径没有添加. 所以你需要将.py文件的路径添加了,一种是手动的方法: 1 点击配置文件 2 点击添加 3 选择python并添加.py文件路径 比如,本文中的设置如下: 当你

  • pandas处理csv文件的方法步骤

    一.我的需求 对于这样的一个 csv 表,需要将其 (1)将营业部名称和日期和股票代码进行拼接 (2)对于除了买入金额不同的的数据需要将它们的买入金额相加,每个买入金额乘以买卖序号的符号表示该营业名称对应的买入金额 比如:xx公司,20190731,1,股票1,4000,C20201010,xxxx 我这里想要的结果是:xx公司2019713C20201010,4000 二.代码 (1)首先由于文件是 gbk,所以读取是需要注意 encoding (2)日期是int类型,所以需要转化为 字符串

  • 使用navicat导入sql文件的方法步骤

    一.打开navicat,打开连接,右击连接名(如果新建连接,需要使用对应数据库的ip地址和密码,本机的是地址localhost,密码是自己mysql数据库的密码),选择新建数据库,数据库名要和想要导入的文件名一样(这种情况针对的是sql文件是直接由整个数据库导出的一个sql文件,如果表导出的sql文件,应该是随便命名数据库的名字,表名应该是和需要导入的文件名字相同(第二种情况没有亲自试过)). 二.右击建好的数据库,选择运行SQL文件,在出现的页面中选择要导入的SQL文件.然后点击开始,等待导入

  • Navicat Premium如何导入SQL文件的方法步骤

    Navicat Premium如何导入SQL文件的方法步骤

    今天开始写期末项目,不过今年用的MySQL数据库,所以就用了Navicat premium进行管理,数据库是另一个小伙伴写的,需要导入,但是Navicat没有直接导入SQL文件的按钮,尝试了几次,都不行,查了度娘,好多都文不对题,最后终于解决,写一下解决方案,原来很简单.... 1.首先,链接上Navicat,在链接下新建数据库,数据库名和要导入的一样,字符集选utf-8,确定 2.先右键点击打开数据库,然后,直接将数据库文件拖拽到新建的数据库上 3.弹出这个对话框,直接点击开始,完成后.然后直

  • java项目导出为.exe执行文件的方法步骤

    java项目导出为.exe执行文件的方法步骤

    将java项目导出为.exe执行文件需要借助于第三方软件,本文我们选择jar2exe软件. 第一步:先安装jar2exe软件,安装直接选择默认步骤即可. 第二步:需要将项目导出为jar文件,请参考上一篇文章. 第三步:打开Jar2Exe Wizard 2.5 第四步:选择你要输出的jar文件全路径以及所使用的平台,运行时JRE的版本,建议选此软件支持的最低版本和最高版本即可. 第五步:选择是控制台程序.图形化界面或服务器程序 .本文所操作的项目时GUI的 第六步:选择运行的主类 第七步:对应字节

随机推荐