plugin style

components/Player.php

@@ -45,6 +45,10 @@ public function onRun()
             "build" => "Croqo.Lottie",
             "defer" => true
         ]);
+        $this->addCss("assets/main.css", [
+            "build" => "Croqo.Lottie",
+            "defer" => true
+        ]);
     }
 
     /**

package.json

@@ -36,7 +36,10 @@
     "lottie-web": "^5.7.14"
   },
   "devDependencies": {
-    "webpack": "^5.61.0",
+    "css-loader": "^6.5.1",
+    "mini-css-extract-plugin": "^2.4.5",
+    "sass": "^1.43.5",
+    "sass-loader": "^12.3.0",
     "webpack-cli": "^4.9.1"
   },
   "peerDependencies": {

sources/style.sass

@@ -0,0 +1,16 @@
+@mixin fixed()
+    width: 100vw !important
+    min-height: 100vh !important
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    z-index: 10
+
+.lottie
+    width: 100%
+    height: 100%
+    &.is-fixed
+        @include fixed()
+

webpack.config.js

@@ -1,28 +1,53 @@
 const 
+    MiniCssExtractPlugin = require("mini-css-extract-plugin"),
     webpack = require("webpack"),
     path = require("path")
 ;
 module.exports = {
     devtool: false,
-    entry: "./sources",
+    entry: {
+        "main": [
+            "./sources/index.js",
+            "./sources/style.sass"
+        ]
+    },
     output: {
         clean: true,
-        path: path.resolve(__dirname, "assets"),
-        filename: "[name].js"
+        path: path.resolve(__dirname, "assets")
     },
+    module: {
+        rules: [
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                {
+                    loader: "css-loader",
+                    options: {
+                    sourceMap: true,
+                    },
+                },
+                {
+                    loader: "sass-loader",
+                    options: {
+                    sourceMap: true,
+                    },
+                },
+                ],
+            },
         ],
     },
     plugins: [
-        new webpack.SourceMapDevToolPlugin({
-            filename: '[name].js.map',
-            exclude: ['vendor.js'],
-        }),
+        new MiniCssExtractPlugin(),
         new webpack.ProgressPlugin({
             activeModules: false,
             entries: true,
             profile: true,
             dependencies: true,
             percentBy: "entries"
         })
-    ]
+    ],
+    optimization: {
+        minimize: true
+    }
 }