详解vue项目中如何引入全局sass/less变量、function、mixin

npm install -d sass-resource-loader

'use strict'const path = require('path')const config = require('../config')const ExtractTextPlugin = require('extract-text-webpack-plugin')const packageConfig = require('../package.json')exports.assetsPath = function (_path) { const assetsSubDirectory = process.env.NODE_ENV === 'production'  ? config.build.assetsSubDirectory  : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path)}exports.cssLoaders = function (options) { options = options || {} const cssLoader = {  loader: 'css-loader',  options: {   sourceMap: options.sourceMap  } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) {  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]  if (loader) {   loaders.push({    loader: loader + '-loader',    options: Object.assign({}, loaderOptions, {     sourceMap: options.sourceMap    })   })  }  // 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(),  postcss: generateLoaders(),  less: generateLoaders('less'),  sass: generateLoaders('sass', { indentedSyntax: true }),  scss: generateLoaders('sass'),  stylus: generateLoaders('stylus'),  styl: generateLoaders('stylus') }}// Generate loaders for standalone style files (outside of .vue)exports.styleLoaders = function (options) { const output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) {  const loader = loaders[extension]  output.push({   test: new RegExp('//.' + extension + '$'),   use: loader  }) } return output}exports.createNotifierCallback = () => { const notifier = require('node-notifier') return (severity, errors) => {  if (severity !== 'error') return  const error = errors[0]  const filename = error.file && error.file.split('!').pop()  notifier.notify({   title: packageConfig.name,   message: severity + ': ' + error.name,   subtitle: filename || '',   icon: path.join(__dirname, 'logo.png')  }) }}/** * 增加 hljs 的 classname */exports.wrapCustomClass = function (render) { return function (...args) {  return render(...args)   .replace('<code class="', '<code class="hljs ')   .replace('<code>', '<code class="hljs">') }}/** * Format HTML string */exports.convertHtml = function (str) { return str.replace(/(&#x)(/w{4});/gi, $0 => String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(/w{4})(%3B)/g, '$2'), 16)))}

// https://vue-loader.vuejs.org/en/configurations/extract-css.html return {  css: generateLoaders(),  postcss: generateLoaders(),  less: generateLoaders('less'),  sass: generateLoaders('sass', { indentedSyntax: true }),  scss: generateLoaders('sass'),  stylus: generateLoaders('stylus'),  styl: generateLoaders('stylus') }

/**  * sass Less 源文件  * @param name classFile  * @returns {string}  */ function resolveResouce(name) {  return path.resolve(__dirname, '../static/' + name); } //导入全局sass mixin function等 function generateSassResourceLoader(){  var loaders = [   cssLoader,   //'postcss-loader',   'sass-loader',   {    loader:'sass-resources-loader',    options: {     //需要一个全局路径     resources: [resolveResouce('index.scss')]    }   }  ]  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(),  postcss: generateLoaders(),  less: generateLoaders('less'),  sass:generateSassResourceLoader(),  scss:generateSassResourceLoader(),  stylus: generateLoaders('stylus'),  styl: generateLoaders('stylus') }