Add missing CSS loaders for todomvc app (rustwasm#3535)

* Add missing CSS loaders for todomvc app Currently webpack does not bundle the index.css file located in the root directory. This PR adds the corresponding plugins and loaders to ensure the file is correctly bundled. Fixes rustwasm#3443 * Fixed failing CI build Bumped version of `css-loader` as we're on webpack 5 already. Signed-off-by: Oliver T <[email protected]> --------- Signed-off-by: Oliver T <[email protected]>
SorenHolstHansen · Aug 8, 2023 · 486238b · 486238b
1 parent eb36f9d
commit 486238b
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 2 deletions.
diff --git a/_package.json b/_package.json
@@ -5,7 +5,9 @@
   },
   "devDependencies": {
     "@wasm-tool/wasm-pack-plugin": "1.5.0",
+    "css-loader": "^6.8.1",
     "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.7.6",
     "text-encoding": "^0.7.0",
     "webpack": "^5.49.0",
     "webpack-cli": "^4.7.2",

diff --git a/examples/todomvc/index.html b/examples/todomvc/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
     <title>web-sys Wasm • TodoMVC</title>
-    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
     <section class="todoapp">

diff --git a/examples/todomvc/index.js b/examples/todomvc/index.js
@@ -1,6 +1,7 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
 const rust = import('./pkg');
+const css = import('./index.css');
 
 rust
   .then(m => m.run())

diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
@@ -5,7 +5,9 @@
   },
   "devDependencies": {
     "@wasm-tool/wasm-pack-plugin": "1.5.0",
+    "css-loader": "^6.8.1",
     "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "^2.7.6",
     "text-encoding": "^0.7.0",
     "webpack": "^5.49.0",
     "webpack-cli": "^4.7.2",

diff --git a/examples/todomvc/webpack.config.js b/examples/todomvc/webpack.config.js
@@ -2,6 +2,7 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
 const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -13,6 +14,7 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: 'index.html'
         }),
+        new MiniCssExtractPlugin(),
         new WasmPackPlugin({
             crateDirectory: path.resolve(__dirname, ".")
         }),
@@ -26,5 +28,13 @@ module.exports = {
     mode: 'development',
     experiments: {
         asyncWebAssembly: true
-   }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader'],
+            }
+        ]
+    }
 };