utils.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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. // generate loader string to be used with extract text plugin
  28. function generateLoaders(loader, loaderOptions) {
  29. const loaders = options.usePostCSS
  30. ? [cssLoader, postcssLoader]
  31. : [cssLoader];
  32. if (loader) {
  33. loaders.push({
  34. loader: loader + "-loader",
  35. options: Object.assign({}, loaderOptions, {
  36. sourceMap: options.sourceMap
  37. })
  38. });
  39. }
  40. // Extract CSS when that option is specified
  41. // (which is the case during production build)
  42. if (options.extract) {
  43. return ExtractTextPlugin.extract({
  44. use: loaders,
  45. fallback: "vue-style-loader"
  46. });
  47. } else {
  48. return ["vue-style-loader"].concat(loaders);
  49. }
  50. }
  51. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  52. return {
  53. css: generateLoaders(),
  54. postcss: generateLoaders(),
  55. less: generateLoaders("less", {
  56. modifyVars: {
  57. // 直接覆盖变量
  58. "button-info-border-color": "#0c2469",
  59. "button-info-background-color": "#0c2469",
  60. "checkbox-checked-icon-color": "#0c2469",
  61. "radio-checked-icon-color": "#0c2469",
  62. "tabs-default-color": "#0c2469"
  63. }
  64. }),
  65. sass: generateLoaders("sass", { indentedSyntax: true }),
  66. scss: generateLoaders("sass"),
  67. stylus: generateLoaders("stylus"),
  68. styl: generateLoaders("stylus")
  69. };
  70. };
  71. // Generate loaders for standalone style files (outside of .vue)
  72. exports.styleLoaders = function(options) {
  73. const output = [];
  74. const loaders = exports.cssLoaders(options);
  75. for (const extension in loaders) {
  76. const loader = loaders[extension];
  77. output.push({
  78. test: new RegExp("\\." + extension + "$"),
  79. use: loader
  80. });
  81. }
  82. return output;
  83. };
  84. exports.createNotifierCallback = () => {
  85. const notifier = require("node-notifier");
  86. return (severity, errors) => {
  87. if (severity !== "error") return;
  88. const error = errors[0];
  89. const filename = error.file && error.file.split("!").pop();
  90. notifier.notify({
  91. title: packageConfig.name,
  92. message: severity + ": " + error.name,
  93. subtitle: filename || "",
  94. icon: path.join(__dirname, "logo.png")
  95. });
  96. };
  97. };