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

当mpvue项目初始化时，使用sass步骤

1.安装相关性：

NPM安装sass-loader节点-sass-save-dev2。将lang=" scss "添加到。vue文件，这样sass可以愉快地用于开发。不需要在webpack.base.config.js中配置loader，webpack会自动识别。中的scss文件和scss代码。vue。

在使用sass开发时，我们经常需要在每一页上使用统一的变量，并且有一些方法。如果这种公共资源没有经过特殊处理，我们需要在每一页都有@import来使用它。如果页面比较多，后期维护可能会有点困难。这里，我们介绍如何处理在mpvue下将sass资源文件全局引入sass的步骤：

1.首先，需要安装sass-resource-loader(我的版本号是1.3.3):

NPM安装sass-resources-loader-save-dev2。然后在项目的根目录中找到build/utils.js文件，我们添加一个loader对象

在var sass resource reader={ loader : ' sass-resources-loader '中，选项3360 { resources :[路径。resolve (_ _ dirname '，/src/资产/变量。SCS ')，]}资源数组，放置要引入的sass资源。

最好在与其他加载程序相同的级别声明对象

3.然后重写generateLoaders函数

//生成要与提取文本插件函数generateLoaders(loader，loaderooptions，otherloader){ var loaders=[cssLoader，px2rpxLoader，postsloader]if(loader){ loaders . push({ loader : loader '-loader '，options 3360 object . assign({ }，loaderooptions，{ source map 3360 options . source map })})if(！另一个加载器)加载器。推送(另一个加载器)//在指定该选项时提取CSS(在生产构建期间就是这种情况)If(选项。extract){ return extract plugin。extract ({use:loaders，fallback 3360 ' vue-style-loader ' })else { return[' vue-style-loader ']。concat (loaders)}}主要换了两个地方，只是

最后，我们添加通过定制添加的加载器：

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