Shared variables between JS/SCSS

build-tools/config/webpack/webpack.dev.conf.js

@@ -5,6 +5,7 @@ const baseWebpackConfig = require('./webpack.base.conf');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const path = require('path');
 const webpackHelpers = require('./webpackHelpers');
 const detectPort = require('detect-port');
@@ -20,7 +21,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       },
       {
         test: /\.vue$/,
-        use: [webpackHelpers.getVueLoaderConfig(true)],
+        use: [webpackHelpers.getVueLoaderConfig()],
       },
       {
         test: /\.(png|jpe?g|gif)(\?.*)?$/,
@@ -70,6 +71,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
   },
   devtool: 'cheap-module-eval-source-map',
   plugins: [
+    new VueLoaderPlugin(),
     new webpack.DefinePlugin({
       'process.env': config.dev.env,
     }),

build-tools/config/webpack/webpack.prod.conf.js

@@ -3,11 +3,12 @@ const config = require('../../config');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const baseWebpackConfig = require('./webpack.base.conf');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const webpackHelpers = require('./webpackHelpers');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const ImageminPlugin = require('imagemin-webpack-plugin').default;
@@ -23,13 +24,11 @@ const webpackConfig = merge(baseWebpackConfig, {
     rules: [
       {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract({
-          use: webpackHelpers.getScssLoaderConfig(),
-        }),
+        use: webpackHelpers.getScssLoaderConfig(),
       },
       {
         test: /\.vue$/,
-        use: [webpackHelpers.getVueLoaderConfig(false)],
+        use: [webpackHelpers.getVueLoaderConfig()],
       },
       {
         test: /\.(png|jpe?g|gif)(\?.*)?$/,
@@ -67,11 +66,19 @@ const webpackConfig = merge(baseWebpackConfig, {
     concatenateModules: true,
     minimize: true,
     splitChunks: {
-      chunks: 'all'
+      chunks: 'all',
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          chunks: "all"
+        },
+      },
     },
-    runtimeChunk: true
+    runtimeChunk: false
   },
   plugins: [
+    new VueLoaderPlugin(),
     new WebpackCleanupPlugin(),
     new webpack.DefinePlugin({
       'process.env': env,
@@ -82,7 +89,7 @@ const webpackConfig = merge(baseWebpackConfig, {
         safe: true,
       },
     }),
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: path.posix.join(config.build.versionPath, 'css/[name].css'),
     }),
     new HtmlWebpackPlugin({

build-tools/config/webpack/webpackHelpers.js

@@ -1,10 +1,11 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const path = require('path');
+const jsonImporter = require('node-sass-json-importer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 exports.getSassLoaderConfig = function(isDevelopment) {
   return {
     loader: 'sass-loader',
     options: {
+      importer: jsonImporter,
       data: '@import "src/asset/style/utils.scss";',
       includePaths: ['src/asset/style'],
       sourceMap: isDevelopment
@@ -26,7 +27,10 @@ exports.getScssLoaderConfig = function(isDevelopment) {
     {
       loader: 'css-loader',
       options: {
-        sourceMap: isDevelopment
+        sourceMap: isDevelopment,
+        localIdentName: '[local]-[hash:base64:7]',
+        camelCase: true,
+        importLoaders: 2,
       }
     },
     {
@@ -44,58 +48,22 @@ exports.getScssLoaderConfig = function(isDevelopment) {
     });
   }
 
-  return config;
-};
-
-exports.getVueLoaderConfig = function(isDevelopment) {
-  let scssLoaders;
-
-  if (isDevelopment) {
-    scssLoaders = ['vue-style-loader'].map(loader => ({ loader }));
-    scssLoaders.push({
-      loader: 'css-loader',
-      options: {
-        sourceMap: true
-      }
-    });
-    scssLoaders.push(this.getSassLoaderConfig());
-  } else {
-    scssLoaders = ExtractTextPlugin.extract({
-      use: [
-        {
-          loader: 'css-loader',
-        },
-        this.getSassLoaderConfig(isDevelopment),
-      ],
-      fallback: 'vue-style-loader',
-    });
+  if (!isDevelopment) {
+    config.unshift(MiniCssExtractPlugin.loader);
   }
 
-  const jsLoaders = [
-    {
-      loader: 'babel-loader',
-    },
-  ];
+  return config;
+};
 
-  const config = {
+exports.getVueLoaderConfig = function() {
+  return {
     loader: 'vue-loader',
     options: {
-      loaders: {
-        scss: scssLoaders,
-        js: jsLoaders,
+      transformAssetUrls: {
+        source: ['src', 'srcset']
       },
-      postcss: [],
-
-      cssModules: {
-        localIdentName: '[local]-[hash:base64:7]',
-        camelCase: true,
-      },
-      transformToRequire: {
-        source: 'srcset'
-      }},
+    },
   };
-
-  return config;
 };
 
 exports.getSvgoLoaderConfig = function() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-skeleton",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "A Vue Skeleton",
   "author": "Hendrik-Jan de Harder <hendrik-jan@mediamonks.com>",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "fetch-polyfill": "^0.8.2",
     "gsap": "^1.19.1",
     "lodash": "^4.17.4",
+    "mini-css-extract-plugin": "^0.4.0",
     "modernizr": "^3.3.1",
     "normalize.css": "^8.0.0",
     "seng-config": "^1.1.0",
@@ -68,7 +69,6 @@
     "eslint-plugin-prettier": "^2.1.2",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^4.0.0-alpha.0",
     "favicons-webpack-plugin": "^0.0.7",
     "file-loader": "^1.1.9",
     "friendly-errors-webpack-plugin": "^1.6.1",
@@ -83,6 +83,7 @@
     "lodash-webpack-plugin": "^0.11.4",
     "modernizr-loader": "^1.0.1",
     "node-sass": "^4.4.0",
+    "node-sass-json-importer": "^3.2.0",
     "opn": "^5.0.0",
     "optimize-css-assets-webpack-plugin": "^4.0.0",
     "ora": "^2.0.0",
@@ -111,10 +112,10 @@
     "tslint-plugin-prettier": "^1.3.0",
     "typescript": "^2.3.4",
     "url-loader": "^1.0.1",
-    "vue-loader": "^14.1.1",
-    "vue-style-loader": "^4.0.2",
+    "vue-loader": "^15.0.10",
+    "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.2.6",
-    "webpack": "^4.0.0",
+    "webpack": "^4.10.2",
     "webpack-bundle-analyzer": "^2.11.0",
     "webpack-cleanup-plugin": "^0.5.1",
     "webpack-cli": "^2.0.9",

src/asset/style/util/_variable.scss

@@ -7,8 +7,8 @@ $zLayout: default;
 
 // Colors
 
-// MediaQueries
-$mediaQueries: ();
+// $mediaQueries
+@import '../../../data/mediaQueries.json';
 
 // Paths
 $pathComponentImage: 'asset/image';

src/data/mediaQueries.json

@@ -0,0 +1,6 @@
+{
+  "mediaQueries": {
+    "MEDIUM": "(min-width: 768px)",
+    "LARGE": "(min-width: 1024px)"
+  }
+}