utils.js 2.7 KB

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