本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于mpvue中sass全局變量的配置方法（代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

安裝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    }  }  //添加該項(xiàng)  var sassResourceLoader = {    loader: 'sass-resources-loader',    options: {      resources: [      //修改相應(yīng)路徑        path.resolve(__dirname, '../src/styles/index.scss'),      ]    }  }  //添加該項(xiàng)  // 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(o沈陽(yáng)軟件開發(fā)
ptions)  for (var extension in loaders) {    var loader = loaders[extension]    output.push({      test: new RegExp('\\.' + extension + '$'),      use: loader    })  }  return output}

以上就是mpvue中sass全局變量的配置方法（代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注沈陽(yáng)網(wǎng)站建設(shè)其它相關(guān)文章！