mpvue中sass全局变量的配置方法（代码）

安装loader

cnpm i sass-loader sass-resources-loader --save-dev

修改根目录下/build/utils.js

var path = require('path') var config = require('../config') var ExtractTextPlugin = require('extract-text-webpack-plugin')  exports.assetsPath = function (_path) {   var assetsSubDirectory = process.env.NODE_ENV === 'production'     ? config.build.assetsSubDirectory     : config.dev.assetsSubDirectory   return path.posix.join(assetsSubDirectory, _path) }  exports.cssLoaders = function (options) {   options = options || {}    var cssLoader = {     loader: 'css-loader',     options: {       minimize: process.env.NODE_ENV === 'production',       sourceMap: options.sourceMap     }   }    var postcssLoader = {     loader: 'postcss-loader',     options: {       sourceMap: true     }   }    var px2rpxLoader = {     loader: 'px2rpx-loader',     options: {       baseDpr: 1,       rpxUnit: 0.5     }   }   //添加该项   var sassResourceLoader = {     loader: 'sass-resources-loader',     options: {       resources: [       //修改相应路径         path.resolve(__dirname, '../src/styles/index.scss'),       ]     }   }   //添加该项    // 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)     }   }    // https://vue-loader.vuejs.org/en/configurations/extract-css.html   return {     css: generateLoaders(),     wxss: generateLoaders(),     postcss: generateLoaders(),     less: generateLoaders('less'),     //修改     sass: generateLoaders('sass', { indentedSyntax: true },sassResourceLoader),     scss: generateLoaders('sass',{},sassResourceLoader),     //修改     stylus: generateLoaders('stylus'),     styl: generateLoaders('stylus')   } }  // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) {   var output = []   var loaders = exports.cssLoaders(options)   for (var extension in loaders) {     var loader = loaders[extension]     output.push({       test: new RegExp('\\.' + extension + '$'),       use: loader     })   }   return output }

以上就是mpvue中sass全局变量的配置方法（代码）的详细内容，更多内容请关注技术你好其它相关文章！