mpvue php,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.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

}