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

本篇文章给大家带来的内容是关于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(o沈阳软件开发
ptions)  for (var extension in loaders) {    var loader = loaders[extension]    output.push({      test: new RegExp('\\.' + extension + '$'),      use: loader    })  }  return output}

以上就是mpvue中sass全局变量的配置方法（代码）的详细内容，更多请关注沈阳网站建设其它相关文章！