Merge pull request #2349 from overleaf/as-webpack-css

Compile CSS using webpack

GitOrigin-RevId: 489834038667dde572ea5d9b4b9392b362259a09

services/web/webpack.config.dev.js

@@ -1,4 +1,5 @@
 const merge = require('webpack-merge')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const base = require('./webpack.config')
 
@@ -8,6 +9,14 @@ module.exports = merge(base, {
   // Enable source maps for dev (fast compilation, slow runtime)
   devtool: 'cheap-module-eval-source-map',
 
+  plugins: [
+    // Extract CSS to a separate file (rather than inlining to a <style> tag)
+    new MiniCssExtractPlugin({
+      // Output to public/stylesheets directory
+      filename: 'stylesheets/[name].css'
+    })
+  ],
+
   devServer: {
     // Disable webpack dev server auto-reload
     inline: false,
@@ -26,7 +35,7 @@ module.exports = merge(base, {
       chunks: false,
       modules: false,
       // Hide copied assets from output
-      excludeAssets: [/^ace/, /^libs/, /^cmaps/]
+      excludeAssets: [/^js\/ace/, /^js\/libs/, /^js\/cmaps/]
     }
   }
 })