Remove SASS from generated projects and use standard CSS. Fixes #905 (#909)

Author: jwoertink

src/browser_app_skeleton/package.json.ecr

@@ -14,7 +14,6 @@
     "watch": "vite build --watch"
   },
   "devDependencies": {
-    "sass": "^1.97.2",
     "vite": "^7.3.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-dev-manifest": "^1.4.1"

…rowser_app_skeleton/src/css/app.scss.ecr …browser_app_skeleton/src/css/app.css.ecrsrc/browser_app_skeleton/src/css/app.scss.ecr renamed to src/browser_app_skeleton/src/css/app.css.ecr src/browser_app_skeleton/src/css/app.scss.ecr renamed to src/browser_app_skeleton/src/css/app.css.ecr

@@ -1,23 +1,26 @@
-// Lucky generates 3 folders to help you organize your CSS:
-//
-//    - src/css/variables # Files for colors, spacing, etc.
-//    - src/css/mixins # Put your mixin functions in files here
-//    - src/css/components # CSS for your components
-//
-// Remember to import your new CSS files or they won't be loaded:
-//
-//    @import "./variables/colors" # Imports the file in src/css/variables/_colors.scss
-//
-// Note: Vite automatically resolves imports from node_modules
-// https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do
+/* Lucky generates 3 folders to help you organize your CSS:
+*
+*    - src/css/variables # Files for colors, spacing, etc.
+*    - src/css/mixins # Put your mixin functions in files here
+*    - src/css/components # CSS for your components
+*
+* Remember to import your new CSS files or they won't be loaded:
+*
+*    @import "./variables/colors";
+*
+* Note: Vite automatically resolves imports from node_modules
+* https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do
+*/
 
 @import 'modern-normalize/modern-normalize.css';
-// Add your own components and import them like this:
-//
-// @import "components/my_new_component";
+/* Add your own components and import them like this:
+*
+* @import "components/my_new_component";
+*/
 
-// Default Lucky styles.
-// Delete these when you're ready to bring in your own CSS.
+/* Default Lucky styles.
+* Delete these when you're ready to bring in your own CSS.
+*/
 body {
   font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
     Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,

src/browser_app_skeleton/vite.config.js.ecr

@@ -24,9 +24,9 @@ export default defineConfig({
       input: {
         // These entry names map to asset paths in Lucky:
         // "app" -> asset("js/app.js")
-        // "styles" -> asset("css/app.scss")
+        // "styles" -> asset("css/app.css")
         app: resolve(__dirname, 'src/js/app.js'),
-        styles: resolve(__dirname, 'src/css/app.scss')
+        styles: resolve(__dirname, 'src/css/app.css')
       }
     },
     // Asset output configuration

src/lucky_cli/browser_src_template.cr

@@ -86,8 +86,8 @@ class BrowserSrcTemplate
         end
       end
       src_dir.add_folder("css") do |css_dir|
-        css_dir.add_file("app.scss") do |io|
-          ECR.embed("#{__DIR__}/../browser_app_skeleton/src/css/app.scss.ecr", io)
+        css_dir.add_file("app.css") do |io|
+          ECR.embed("#{__DIR__}/../browser_app_skeleton/src/css/app.css.ecr", io)
         end
         css_dir.add_folder("components/.keep")
         css_dir.add_folder("mixins/.keep")

src/web_app_skeleton/config/server.cr.ecr

@@ -27,7 +27,7 @@ Lucky::Server.configure do |settings|
   # Configure asset host for Vite
   if LuckyEnv.development?
     # In development, Vite serves assets from its dev server
-    settings.asset_host = "http://localhost:3001"
+    settings.asset_host = ""
   elsif LuckyEnv.production?
     # In production, Lucky serves the built assets
     # You could also use a CDN here: