utils.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. 'use strict'
  2. const path = require('path')
  3. const config = require('../config')
  4. const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5. const packageConfig = require('../package.json')
  6. // var cssLoader = {
  7. // loader: 'css-loader',
  8. // options: {
  9. // sourceMap: options.sourceMap
  10. // }
  11. // }
  12. // var px2remLoader = {
  13. // loader: 'px2rem-loader',
  14. // options: {
  15. // remUnit: 75
  16. // }
  17. // }
  18. exports.assetsPath = function (_path) {
  19. const assetsSubDirectory = process.env.NODE_ENV === 'production'
  20. ? config.build.assetsSubDirectory
  21. : config.dev.assetsSubDirectory
  22. return path.posix.join(assetsSubDirectory, _path)
  23. }
  24. exports.cssLoaders = function (options) {
  25. options = options || {}
  26. const cssLoader = {
  27. loader: 'css-loader',
  28. options: {
  29. sourceMap: options.sourceMap
  30. }
  31. }
  32. const postcssLoader = {
  33. loader: 'postcss-loader',
  34. options: {
  35. sourceMap: options.sourceMap
  36. }
  37. }
  38. const px2remLoader = {
  39. loader: 'px2rem-loader',
  40. options: {
  41. remUnit: 60
  42. }
  43. }
  44. const stylusOptions = {
  45. 'resolve url': true
  46. }
  47. // generate loader string to be used with extract text plugin
  48. function generateLoaders (loader, loaderOptions) {
  49. const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];
  50. // var loaders = [cssLoader, px2remLoader]
  51. if (loader) {
  52. loaders.push({
  53. loader: loader + '-loader',
  54. options: Object.assign({}, loaderOptions, {
  55. sourceMap: options.sourceMap
  56. })
  57. })
  58. }
  59. // Extract CSS when that option is specified
  60. // (which is the case during production build)
  61. if (options.extract) {
  62. return ExtractTextPlugin.extract({
  63. use: loaders,
  64. fallback: 'vue-style-loader',
  65. publicPath:'../../'
  66. })
  67. } else {
  68. return ['vue-style-loader'].concat(loaders)
  69. }
  70. }
  71. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  72. return {
  73. css: generateLoaders(),
  74. postcss: generateLoaders(),
  75. less: generateLoaders('less'),
  76. sass: generateLoaders('sass', { indentedSyntax: true }),
  77. scss: generateLoaders('sass'),
  78. stylus: generateLoaders('stylus', stylusOptions),
  79. styl: generateLoaders('stylus', stylusOptions)
  80. }
  81. }
  82. // Generate loaders for standalone style files (outside of .vue)
  83. exports.styleLoaders = function (options) {
  84. const output = []
  85. const loaders = exports.cssLoaders(options)
  86. for (const extension in loaders) {
  87. const loader = loaders[extension]
  88. output.push({
  89. test: new RegExp('\\.' + extension + '$'),
  90. use: loader
  91. })
  92. }
  93. return output
  94. }
  95. exports.createNotifierCallback = () => {
  96. const notifier = require('node-notifier')
  97. return (severity, errors) => {
  98. if (severity !== 'error') return
  99. const error = errors[0]
  100. const filename = error.file && error.file.split('!').pop()
  101. notifier.notify({
  102. title: packageConfig.name,
  103. message: severity + ': ' + error.name,
  104. subtitle: filename || '',
  105. icon: path.join(__dirname, 'logo.png')
  106. })
  107. }
  108. }