setup wepback to process newly added styles.scss

KajanM · Feb 14, 2021 · 9c9d608 · 9c9d608
1 parent c0e6fe8
commit 9c9d608
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/AspNetCoreVueMpa.Web/ClientApp/webpack.config.js b/AspNetCoreVueMpa.Web/ClientApp/webpack.config.js
@@ -1,6 +1,7 @@
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const glob = require('glob');
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const entries = {};
 const IGNORE_PATHS = ['unused'];
@@ -28,10 +29,23 @@ module.exports = {
       {
         test: /\.vue$/,
         loader: 'vue-loader',
-      }
+      },
+      {
+        test: [
+          path.join(__dirname, 'assets/styles/styles.scss'),
+        ],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader',
+        ]
+      },
     ]
   },
   plugins: [
     new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].bundle.css'
+    }),
   ]
 }