utils.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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 postcssLoader = {
  22. loader: "postcss-loader",
  23. options: {
  24. sourceMap: options.sourceMap
  25. }
  26. };
  27. const px2remLoader = {
  28. loader: 'px2rem-loader',
  29. options: {
  30. remUnit: 37.5
  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,px2remLoader, postcssLoader]
  37. : [cssLoader,px2remLoader];
  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. publicPath: "../../",
  52. fallback: "vue-style-loader"
  53. });
  54. } else {
  55. return ["vue-style-loader"].concat(loaders);
  56. }
  57. }
  58. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  59. return {
  60. css: generateLoaders(),
  61. postcss: generateLoaders(),
  62. less: generateLoaders("less"),
  63. sass: generateLoaders("sass", { indentedSyntax: true }),
  64. scss: generateLoaders("sass"),
  65. stylus: generateLoaders("stylus"),
  66. styl: generateLoaders("stylus")
  67. };
  68. };
  69. // Generate loaders for standalone style files (outside of .vue)
  70. exports.styleLoaders = function(options) {
  71. const output = [];
  72. const loaders = exports.cssLoaders(options);
  73. for (const extension in loaders) {
  74. const loader = loaders[extension];
  75. output.push({
  76. test: new RegExp("\\." + extension + "$"),
  77. use: loader
  78. });
  79. }
  80. return output;
  81. };
  82. exports.createNotifierCallback = () => {
  83. const notifier = require("node-notifier");
  84. return (severity, errors) => {
  85. if (severity !== "error") return;
  86. const error = errors[0];
  87. const filename = error.file && error.file.split("!").pop();
  88. notifier.notify({
  89. title: packageConfig.name,
  90. message: severity + ": " + error.name,
  91. subtitle: filename || "",
  92. icon: path.join(__dirname, "logo.png")
  93. });
  94. };
  95. };