Update build options

client/build/utils.js

@@ -4,85 +4,62 @@ 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
+const isDev = process.env.NODE_ENV !== 'production';
+
+const styleRule = (scss) => {
+  const test = scss ? /\.scss$/ : /\.css$/;
+  let use = [
+    {
+      loader: 'css-loader',
+      // options: {importLoaders: scss ? 3 : 2}
+      options: {
+        sourceMap: isDev,
+        importLoaders: scss ? 2 : 1
+      }
+    },
+    'postcss-loader'
+  ];
+  if (scss) {
+    use = [
+      ...use,
+      {
+        loader: 'sass-loader',
+        options: {
+          data: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : '',
+          sourceMap: isDev
+        }
+      }
+    ]
+  }
+
+  if (!isDev) {
+    return {
+      test,
+      loader: ExtractTextPlugin.extract({
+        use,
+        fallback: 'vue-style-loader'
+      })
+    }
+  } else {
+    return {
+      test,
+      use: [
+        'vue-style-loader',
+        ...use
+      ]
+    }
+  }
+}
+
+const assetsPath = (_path) => {
+  const assetsSubDirectory = isDev
+    ? config.dev.assetsSubDirectory
+    : config.build.assetsSubDirectory
 
   return path.posix.join(assetsSubDirectory, _path)
 }
 
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  const postcssLoader = {
-    loader: 'postcss-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 createNotifierCallback = () => {
   const notifier = require('node-notifier')
 
   return (severity, errors) => {
@@ -99,3 +76,10 @@ exports.createNotifierCallback = () => {
     })
   }
 }
+
+module.exports = {
+  styleRule,
+  isDev,
+  assetsPath,
+  createNotifierCallback
+}

client/build/vue-loader.conf.js

@@ -1,18 +1,6 @@
 'use strict'
-const utils = require('./utils')
 const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
 
 module.exports = {
-  // loaders: utils.cssLoaders({
-  //   sourceMap: sourceMapEnabled,
-  //   todo: need that?
-  //   extract: isProduction
-  // }),
-  // cssSourceMap: sourceMapEnabled,
   // cacheBusting: config.dev.cacheBusting,
-
 }

client/build/webpack.base.conf.js

@@ -1,53 +1,16 @@
 'use strict'
 const path = require('path')
-const utils = require('./utils')
 const config = require('../config')
-const vueLoaderConfig = require('./vue-loader.conf')
 
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+const {isDev, styleRule, assetsPath} = require('./utils');
 
 function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
-const styleRule = (scss) => {
-  const test = scss ? /\.scss$/ : /\.css$/;
-  let use;
-  if (scss) {
-    use = [
-      'css-loader',
-      {
-        loader: 'sass-loader',
-        options: {
-          data: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : ''
-        }
-      }
-    ]
-  } else {
-    use = [
-      'css-loader'
-    ]
-  }
 
-  if (process.env.NODE_ENV === 'production') {
-    return {
-      test,
-      loader: ExtractTextPlugin.extract({
-        use,
-        fallback: 'vue-style-loader'
-      })
-    }
-  } else {
-    return {
-      test,
-      use: [
-        'vue-style-loader',
-        ...use
-      ]
-    }
-  }
-}
 
 const createLintingRule = () => ({
   test: /\.(js|vue)$/,
@@ -60,7 +23,7 @@ const createLintingRule = () => ({
   }
 })
 
-//todo on monday: mini-css-extract-plugin?
+//todo: mini-css-extract-plugin? upgrade to webpack 4, then use this
 //https://github.com/webpack-contrib/mini-css-extract-plugin
 //todo: do we need postcss?
 module.exports = {
@@ -71,9 +34,9 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
+    publicPath: isDev
+      ? config.dev.assetsPublicPath
+      : config.build.assetsPublicPath
   },
   resolve: {
     extensions: ['.js', '.vue', '.json', '.gql', '.graphql', '.scss'],
@@ -115,7 +78,7 @@ module.exports = {
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          name: assetsPath('img/[name].[hash:7].[ext]')
         }
       },
       {
@@ -123,7 +86,7 @@ module.exports = {
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+          name: assetsPath('media/[name].[hash:7].[ext]')
         }
       },
       {
@@ -131,19 +94,10 @@ module.exports = {
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          name: assetsPath('fonts/[name].[hash:7].[ext]')
         }
       },
       styleRule(false), // css rule
-      // {
-      //   test: /\.css$/,
-      //   use: [
-      //     process.env.NODE_ENV !== 'production'
-      //       ? 'vue-style-loader'
-      //       : MiniCssExtractPlugin.loader,
-      //     'css-loader'
-      //   ]
-      // },
       styleRule(true) // sass rule
     ]
   },

client/build/webpack.dev.conf.js

@@ -14,9 +14,6 @@ const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {
-  // module: {
-  //   rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
-  // },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
 

client/src/pages/topic.vue

@@ -70,7 +70,7 @@
           update(data) {
             return this.$getRidOfEdges(data).topic || {};
           },
-          result(r, key) {
+          result() {
             if (this.saveMe) {
               this.saveMe = false;
               this.updateLastVisitedTopic(this.topic.id);

client/src/styles/_toast.scss

@@ -1,4 +1,4 @@
-@import '~vue-toast-notification/dist/theme-default.css';
+@import 'vue-toast-notification/dist/theme-default.css';
 
 .toast .toast-text {
   color: $color-white;