diff --git a/_package.json b/_package.json index 95632f893..f69515ae8 100644 --- 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 index 45cbfe103..29f4125e1 100644 --- a/examples/todomvc/index.html +++ b/examples/todomvc/index.html @@ -3,7 +3,6 @@ web-sys Wasm • TodoMVC -
diff --git a/examples/todomvc/index.js b/examples/todomvc/index.js index 8504fa514..fc065dbb0 100644 --- 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 index 8332534cf..8d72e6a97 100644 --- 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 index 95559a444..27eafe327 100644 --- 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'], + } + ] + } };