Live reload and SCSS compliation working in Docker Image

Dockerfile

@@ -1,20 +1,44 @@
 # Start with a Python base image
-FROM python:3.8-slim
+FROM squidfunk/mkdocs-material
 
-# Set a working directory
-WORKDIR /app
+#COPY . /app
 
-# Copy the requirements.txt file into the image
-COPY requirements.txt /app/
+RUN apk add --no-cache nodejs npm
 
-# Install the Python dependencies
-RUN pip install --no-cache-dir -r requirements.txt
+WORKDIR /docs
 
-# Copy the rest of your MkDocs site source code into the image
-COPY . /app/
+COPY package.json .
+RUN npm install
+
+
+COPY requirements.txt .
+
+RUN pip install -r requirements.txt
+
+COPY . .
 
 # Expose the port MkDocs will run on
-EXPOSE 8000
+EXPOSE 8000 35729
+
+
+# Create a startup script
+RUN echo '#!/bin/sh' > /start.sh && \
+    echo 'npm run watch-sass &' >> /start.sh && \
+    echo 'mkdocs serve --dev-addr 0.0.0.0:8000' >> /start.sh && \
+    chmod +x /start.sh
+
+# Set the startup script as the entry point
+ENTRYPOINT ["/start.sh"]
 
 # Run MkDocs serve command
-CMD ["mkdocs", "serve", "--dev-addr=0.0.0.0:8000"]
+# CMD ["mkdocs", "serve", "--dev-addr=0.0.0.0:8000"]
+
+# Command to run both SCSS watcher and MkDocs serve concurrently
+#CMD ["concurrently", 
+#    "\"sass --watch components/sass/main.scss:components/sass/main.css\"",
+#   "\"mkdocs serve --dev-addr=0.0.0.0:8000\""]
+
+#CMD ["concurrently", 
+#     "\"/usr/local/bin/sass --watch docs/components/sass/main.scss:docs/components/sass/main.css\"",
+#     "\"mkdocs serve --dev-addr=0.0.0.0:8000\"",
+#    "\"python -m livereload docs -p 35729 -w docs\""]

components/sass/layout/grid.css

@@ -0,0 +1 @@
+.btn-grid-3{display:grid;grid-template-columns:repeat(3, 1fr);text-align:center}.grid-items{border:1px solid #ccc;padding:20px;display:flex;align-content:center;justify-content:center}/*# sourceMappingURL=grid.css.map */

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.9'
+services:
+  mkdocs:
+    image: squidfunk/mkdocs-material
+    volumes:
+      - .:/docs
+      - .:/node_modules # Persist node_modules for faster subsequent builds
+    stdin_open: true
+    tty: true
+command: mkdocs serve --dev-addr=0.0.0.0:8000

docs/components/sass/components/_buttons.scss

@@ -16,7 +16,6 @@
 // --8<-- [start:btn]
 .btn {
   border: 0;
-  box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
   display: inline-block;
   font-weight: map-get($font-weight, bold);
   text-decoration: none;
@@ -37,21 +36,17 @@
 /*   Primary Button  ---  Green   */
 
 .btn {
-  background: $button-color;
+  background: $color-darkgreen;
   color: $button-text-color;
-  border: 4px solid transparent;
+gi
 
-  //   &:link,
-  //   &:visited {
-  //     color: $color-white;
-  //   }
   &:focus,
   &.focus {
     border-color: $button-hovercolor;
     outline-color: $button-hovercolor;
   }
-  &:disabled {
-    background: #949494 !important;
+  &:disabled, &.disabled {
+    background: $color-dark-grey !important;
   }
   &:hover,
   &:active,
@@ -66,15 +61,12 @@
     color: $color-white !important;
   }
 }
-
-.disabled {
-  background: #949494 !important;
-}
+// --8<-- [end:btn]
 
 /*---------------------------
   Button Sizes
 ---------------------------*/
-// --8<-- [end:btn]
+
 
 // --8<-- [start:btnSm]
 .btn-sm {