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

本篇文章给大家带来的内容是关于mpvue中sass全局变量的配置方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

安装loadercnpm i sass-loader sass-resources-loader --save-dev修改根目录下/build/utils.jsvar 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.assetsSubDirectoryreturn 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 pluginfunction 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.htmlreturn {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全局变量的配置方法（代码）的详细内容，更多请关注小潘博客其它相关文章！