18842388900

网站建设 APP开发 小程序

Article/文章

记录成长点滴 分享您我感悟

您当前位置>首页 > 知识 > 软件开发

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

发表时间:2019-05-20 08:49:57

文章来源:沈阳网站建设

标签:小程序 javascript mpvue

分享:

浏览次数:0

本篇文章给大家带来的内容是关于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沈阳软件开发

<a href=http://www.sywzjs.com target=_blank class=infotextkey>沈阳<a href=http://www.sywzjs.com target=_blank class=infotextkey>软件开发</a></a>,<a href=http://www.sywzjs.com target=_blank class=infotextkey>沈阳<a href=http://www.sywzjs.com target=_blank class=infotextkey>软件公司</a></a>

ptions) for (var extension in loaders) { var loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output}

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

小程序,javascript,mpvue

相关案例查看更多