您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

mpvue中sass全局变量的配置方法(代码)

2024/3/5 20:33:48发布20次查看
本篇文章给大家带来的内容是关于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全局变量的配置方法(代码)的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product