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

 更新时间:2019年03月06日 15:21:06   作者:fairyIer  
这篇文章主要介绍了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加上去:

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

相关文章

  • Vue中axios的基本用法详解

    Vue中axios的基本用法详解

    axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端,这篇文章主要介绍了Vue中axios的基本用法及axios的特征和使用注意细节,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue2仿淘宝实现省市区三级联动

    Vue2仿淘宝实现省市区三级联动

    这篇文章主要为大家详细介绍了Vue2仿淘宝实现省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 离线搭建vue环境运行项目详细步骤

    离线搭建vue环境运行项目详细步骤

    由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,下面这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的详细步骤,需要的朋友可以参考下
    2023-11-11
  • 学习vue.js表单控件绑定操作

    学习vue.js表单控件绑定操作

    这篇文章主要和大家一起学习vue.js表单控件绑定操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue 实现滚动到底部翻页效果(pc端)

    vue 实现滚动到底部翻页效果(pc端)

    这篇文章主要介绍了pc端vue 滚动到底部翻页效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • Vue组件data函数的具体使用

    Vue组件data函数的具体使用

    在Vue组件中,data函数用于定义组件的数据,本文主要介绍了Vue组件data函数的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • vue移动端实现手指滑动效果

    vue移动端实现手指滑动效果

    这篇文章主要为大家详细介绍了vue移动端实现手指滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vue解决跨域问题的几种常用方法(CORS)

    vue解决跨域问题的几种常用方法(CORS)

    在Vue中解决跨域问题有多种方法,今天通过本文给大家介绍几种比较常见的方法,对vue解决跨域问题感兴趣的朋友跟随小编一起看看吧
    2023-05-05
  • vue二级路由设置方法

    vue二级路由设置方法

    下面小编就为大家分享一篇vue二级路由设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue实现电梯样式锚点导航效果流程详解

    Vue实现电梯样式锚点导航效果流程详解

    这篇文章主要介绍了Vue实现电梯样式锚点导航效果流程,这种导航效果广泛应用于商城点餐购物情景,文中通过示例代码介绍的很详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-05-05

最新评论