diff --git a/lib/generators/rolemodel/mailers/USAGE b/lib/generators/rolemodel/mailers/USAGE
index abbafe60..362e303f 100644
--- a/lib/generators/rolemodel/mailers/USAGE
+++ b/lib/generators/rolemodel/mailers/USAGE
@@ -5,7 +5,7 @@ Example:
     rails generate rolemodel:mailers
 
     This will create:
-        app/javascript/packs/mailer_stylesheets.scss
+        app/assets/stylesheets/mailer.css
         app/mailers/user_mailer.rb
         app/views/layouts/mailer.html.slim
         app/views/user_mailer/welcome_email.html.slim
diff --git a/lib/generators/rolemodel/mailers/mailers_generator.rb b/lib/generators/rolemodel/mailers/mailers_generator.rb
index b8ecd3e8..01b9f994 100644
--- a/lib/generators/rolemodel/mailers/mailers_generator.rb
+++ b/lib/generators/rolemodel/mailers/mailers_generator.rb
@@ -12,11 +12,6 @@ def add_premailer_rails_config
       copy_file 'config/initializers/premailer_rails.rb'
     end
 
-    def include_postcss_calc
-      inject_into_file 'postcss.config.cjs', ",\n    require('postcss-calc')",
-                       after: /^\s*require\('postcss-preset-env'\)\({(.|\n)*?}\)/
-    end
-
     def add_action_mailer_asset_host
       unless File.exist?(Rails.root.join('config/initializers/devise.rb'))
         inject_into_file 'config/environments/development.rb',
@@ -74,7 +69,19 @@ def add_production_mailer_defaults
     end
 
     def add_mailer_css
-      copy_file 'app/assets/stylesheets/mailer.scss'
+      copy_file 'app/assets/stylesheets/mailer.css'
+    end
+
+    def add_mailer_webpack_entry
+      say 'Adding mailer stylesheet to Webpack entry points', :green
+
+      inject_into_file 'webpack.config.js', after: /entry: \{\n/ do
+        <<-JS
+    mailer: [
+      './app/assets/stylesheets/mailer.css'
+    ],
+        JS
+      end
     end
 
     def add_mailer_layout
diff --git a/lib/generators/rolemodel/mailers/templates/app/assets/stylesheets/mailer.css b/lib/generators/rolemodel/mailers/templates/app/assets/stylesheets/mailer.css
new file mode 100644
index 00000000..109b7a87
--- /dev/null
+++ b/lib/generators/rolemodel/mailers/templates/app/assets/stylesheets/mailer.css
@@ -0,0 +1,63 @@
+/*
+ * NOTE: Custom fonts and the Material Icons do not currently work in emails.
+ * Since those resources are normally pulled from a CDN, emails may struggle with those
+ * Since premailer rails tries to inline the styles.
+ * In some cases, the email shows as blank since content security policy blocks
+ * any remote content in HTML emails.
+ *
+ * Note: Using Optics Selective imports since we don't need all of the styles for emails
+ */
+
+/* Third party Vendors */
+@import 'modern-css-reset/dist/reset.css';
+
+/* Tokens */
+@import '@rolemodel/optics/dist/css/core/tokens.css';
+
+/* Base styles and utilities */
+@import '@rolemodel/optics/dist/css/core/base.css';
+@import '@rolemodel/optics/dist/css/core/layout.css';
+@import '@rolemodel/optics/dist/css/core/utilities.css';
+
+/* Components */
+@import '@rolemodel/optics/dist/css/components/alert.css'; /* For using the banner style */
+@import '@rolemodel/optics/dist/css/components/avatar.css';
+@import '@rolemodel/optics/dist/css/components/badge.css';
+@import '@rolemodel/optics/dist/css/components/breadcrumbs.css';
+@import '@rolemodel/optics/dist/css/components/button.css';
+@import '@rolemodel/optics/dist/css/components/card.css';
+@import '@rolemodel/optics/dist/css/components/divider.css';
+@import '@rolemodel/optics/dist/css/components/spinner.css';
+@import '@rolemodel/optics/dist/css/components/table.css';
+@import '@rolemodel/optics/dist/css/components/tag.css';
+@import '@rolemodel/optics/dist/css/components/text_pair.css';
+
+:root {
+  --op-font-scale-unit: 1.15;
+}
+
+.email-container {
+  max-width: 600px;
+  margin: auto;
+  padding-left: var(--op-space-x-small);
+  padding-right: var(--op-space-x-small);
+}
+
+.card {
+  border: none;
+}
+
+.email-header {
+  margin-top: var(--op-space-large);
+  margin-bottom: var(--op-space-large);
+  text-align: center;
+}
+
+.email-header__logo {
+  max-width: 100px;
+}
+
+.email-footer {
+  text-align: center;
+  color: var(--op-color-on-background-alt);
+}
\ No newline at end of file
diff --git a/lib/generators/rolemodel/mailers/templates/app/assets/stylesheets/mailer.scss b/lib/generators/rolemodel/mailers/templates/app/assets/stylesheets/mailer.scss
deleted file mode 100644
index 5092ebd5..00000000
--- a/lib/generators/rolemodel/mailers/templates/app/assets/stylesheets/mailer.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-// NOTE: Custom fonts and the Material Icons do not currently work in emails.
-// Since those resources are normally pulled from a CDN, emails may struggle with those
-// Since premailer rails tries to inline the styles.
-// In some cases, the email shows as blank since content security policy blocks
-// any remote content in HTML emails.
-
-// Note: Using Optics Selective imports since we don't need all of the styles for emails
-
-// Third party Vendors
-@import 'modern-css-reset/dist/reset';
-
-// Tokens
-@import '@rolemodel/optics/dist/css/core/tokens';
-
-// Base styles and utilities
-@import '@rolemodel/optics/dist/css/core/base';
-@import '@rolemodel/optics/dist/css/core/layout';
-@import '@rolemodel/optics/dist/css/core/utilities';
-
-// Components
-@import '@rolemodel/optics/dist/css/components/alert'; // For using the banner style
-@import '@rolemodel/optics/dist/css/components/avatar';
-@import '@rolemodel/optics/dist/css/components/badge';
-@import '@rolemodel/optics/dist/css/components/breadcrumbs';
-@import '@rolemodel/optics/dist/css/components/button';
-@import '@rolemodel/optics/dist/css/components/card';
-@import '@rolemodel/optics/dist/css/components/divider';
-@import '@rolemodel/optics/dist/css/components/spinner';
-@import '@rolemodel/optics/dist/css/components/table';
-@import '@rolemodel/optics/dist/css/components/tag';
-@import '@rolemodel/optics/dist/css/components/text_pair';
-
-:root {
-  --op-font-scale-unit: 1.15;
-}
-
-.email-container {
-  max-width: 600px;
-  margin: auto;
-  padding-left: var(--op-space-x-small);
-  padding-right: var(--op-space-x-small);
-}
-
-.card {
-  border: none;
-}
-
-.email-header {
-  margin-top: var(--op-space-large);
-  margin-bottom: var(--op-space-large);
-  text-align: center;
-}
-
-.email-header__logo {
-  max-width: 100px;
-}
-
-.email-footer {
-  text-align: center;
-  color: var(--op-color-on-background-alt);
-}
\ No newline at end of file
diff --git a/lib/generators/rolemodel/mailers/templates/config/initializers/premailer_rails.rb b/lib/generators/rolemodel/mailers/templates/config/initializers/premailer_rails.rb
index e5f5875e..c8f0b805 100644
--- a/lib/generators/rolemodel/mailers/templates/config/initializers/premailer_rails.rb
+++ b/lib/generators/rolemodel/mailers/templates/config/initializers/premailer_rails.rb
@@ -1,7 +1,8 @@
 module CustomPropertyCSSHelper
   def load_css(url)
-    # strip out any CSS Custom Properties, PostCSS includes the fallbacks,
-    # but Premailer can't ignore them so we remove them
+    # strip out any CSS Custom Property declarations, since Premailer can't
+    # inline them. Any var() references should specify a literal fallback
+    # value (e.g. var(--op-color-primary, #005) ) so styles survive inlining.
     super.gsub(/((\b[a-z_-]*?:)?[^\n;{}]*var\(.*?)?\B--.*?(,(?=\n)|;(?!\S)|(?=\}))/, '')
   end
 end
diff --git a/lib/generators/rolemodel/optics/base/base_generator.rb b/lib/generators/rolemodel/optics/base/base_generator.rb
index 2bb5d10b..6a7928f9 100644
--- a/lib/generators/rolemodel/optics/base/base_generator.rb
+++ b/lib/generators/rolemodel/optics/base/base_generator.rb
@@ -12,9 +12,9 @@ def add_optics_package
       def copy_templates
         say 'importing stylesheet', :green
 
-        prepend_to_file Dir.glob('app/assets/stylesheets/application.*').first, <<~SCSS
-          @import '@rolemodel/optics/dist/css/optics';
-        SCSS
+        prepend_to_file Dir.glob('app/assets/stylesheets/application.*').first, <<~CSS
+          @import '@rolemodel/optics/dist/css/optics.css';
+        CSS
       end
     end
   end
diff --git a/lib/generators/rolemodel/saas/devise/devise_generator.rb b/lib/generators/rolemodel/saas/devise/devise_generator.rb
index 6364ce4b..f8721c78 100644
--- a/lib/generators/rolemodel/saas/devise/devise_generator.rb
+++ b/lib/generators/rolemodel/saas/devise/devise_generator.rb
@@ -161,11 +161,11 @@ def add_login_styles
         say 'importing login stylesheet', :green
         copy_file 'app/assets/stylesheets/login.css'
 
-        return unless File.exist?(File.join(destination_root, 'app/assets/stylesheets/application.scss'))
+        return unless File.exist?(File.join(destination_root, 'app/assets/stylesheets/application.css'))
 
-        append_to_file 'app/assets/stylesheets/application.scss', <<~SCSS
-          @import 'login';
-        SCSS
+        append_to_file 'app/assets/stylesheets/application.css', <<~CSS
+          @import 'login.css';
+        CSS
       end
     end
   end
diff --git a/lib/generators/rolemodel/ui_components/modals/modals_generator.rb b/lib/generators/rolemodel/ui_components/modals/modals_generator.rb
index d18b61a0..07773a3e 100644
--- a/lib/generators/rolemodel/ui_components/modals/modals_generator.rb
+++ b/lib/generators/rolemodel/ui_components/modals/modals_generator.rb
@@ -53,11 +53,11 @@ def to_panel_or_not_to_panel
             SLIM
           end
 
-          inject_into_file 'app/assets/stylesheets/application.scss',
-                          after: "@import '@rolemodel/optics/dist/css/optics';\n" do
-            <<~SCSS
-              @import '@rolemodel/optics/dist/css/addons/panel';
-            SCSS
+          inject_into_file 'app/assets/stylesheets/application.css',
+                          after: "@import '@rolemodel/optics/dist/css/optics.css';\n" do
+            <<~CSS
+              @import '@rolemodel/optics/dist/css/addons/panel.css';
+            CSS
           end
         else
           remove_file 'app/views/layouts/panel.html.slim'
diff --git a/lib/generators/rolemodel/ui_components/navbar/navbar_generator.rb b/lib/generators/rolemodel/ui_components/navbar/navbar_generator.rb
index 3538ffb4..d76cfbf7 100644
--- a/lib/generators/rolemodel/ui_components/navbar/navbar_generator.rb
+++ b/lib/generators/rolemodel/ui_components/navbar/navbar_generator.rb
@@ -42,11 +42,11 @@ def add_shoelace_javascript_imports
       def copy_shoelace_css_imports
         say 'Copying Shoelace CSS imports', :green
 
-        copy_file 'app/assets/stylesheets/components/shoelace/index.scss'
-        append_to_file 'app/assets/stylesheets/application.scss' do
-          <<~SCSS
-            @import 'components/shoelace/index.scss';
-          SCSS
+        copy_file 'app/assets/stylesheets/components/shoelace/index.css'
+        append_to_file 'app/assets/stylesheets/application.css' do
+          <<~CSS
+            @import 'components/shoelace/index.css';
+          CSS
         end
       end
     end
diff --git a/lib/generators/rolemodel/ui_components/navbar/templates/app/assets/stylesheets/components/shoelace/index.scss b/lib/generators/rolemodel/ui_components/navbar/templates/app/assets/stylesheets/components/shoelace/index.css
similarity index 100%
rename from lib/generators/rolemodel/ui_components/navbar/templates/app/assets/stylesheets/components/shoelace/index.scss
rename to lib/generators/rolemodel/ui_components/navbar/templates/app/assets/stylesheets/components/shoelace/index.css
diff --git a/lib/generators/rolemodel/webpack/README.md b/lib/generators/rolemodel/webpack/README.md
index e0fd16a5..890db76c 100644
--- a/lib/generators/rolemodel/webpack/README.md
+++ b/lib/generators/rolemodel/webpack/README.md
@@ -4,5 +4,6 @@
 
 * Webpack v5
 * Uses `esbuild-loader` instead of Babel to transpile JS
-* Uses PostCSS to compile CSS and SCSS
-* Honeybadger error monitoring for JS. Run `bundle exec honeybadger install [YOUR API KEY HERE]` to setup Honeybadger for Ruby.
+* Uses `css-loader` to bundle plain CSS
+
+For error monitoring, run the `rolemodel:sentry` generator.
diff --git a/lib/generators/rolemodel/webpack/templates/app/assets/stylesheets/application.css b/lib/generators/rolemodel/webpack/templates/app/assets/stylesheets/application.css
new file mode 100644
index 00000000..cb0e7466
--- /dev/null
+++ b/lib/generators/rolemodel/webpack/templates/app/assets/stylesheets/application.css
@@ -0,0 +1,8 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include
+ * all the files listed below.
+ *
+ * CSS @import statements must appear before any other rules, so keep additional
+ * imports grouped at the top of this file. For example:
+ * @import 'components/modal';
+ */
diff --git a/lib/generators/rolemodel/webpack/templates/app/assets/stylesheets/application.scss b/lib/generators/rolemodel/webpack/templates/app/assets/stylesheets/application.scss
deleted file mode 100644
index e6faa61c..00000000
--- a/lib/generators/rolemodel/webpack/templates/app/assets/stylesheets/application.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// This is a manifest file that'll be compiled into application.css, which will include
-// all the files listed below.
-//
-// For example:
-// @import 'components/modal';
diff --git a/lib/generators/rolemodel/webpack/templates/postcss.config.cjs b/lib/generators/rolemodel/webpack/templates/postcss.config.cjs
deleted file mode 100644
index 7a5bbbf5..00000000
--- a/lib/generators/rolemodel/webpack/templates/postcss.config.cjs
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = {
-  syntax: require('postcss-scss'),
-  plugins: [
-    require('@csstools/postcss-sass')({
-      includePaths: ['node_modules']
-    }),
-    require('postcss-preset-env')({
-      autoprefixer: {
-        flexbox: 'no-2009'
-      },
-      stage: 3
-    })
-  ]
-}
diff --git a/lib/generators/rolemodel/webpack/templates/webpack.config.js b/lib/generators/rolemodel/webpack/templates/webpack.config.js
index 2b91953d..a2188843 100644
--- a/lib/generators/rolemodel/webpack/templates/webpack.config.js
+++ b/lib/generators/rolemodel/webpack/templates/webpack.config.js
@@ -17,7 +17,7 @@ export default {
   entry: {
     application: [
       './app/javascript/application.js',
-      './app/assets/stylesheets/application.scss'
+      './app/assets/stylesheets/application.css'
     ]
   },
   output: {
@@ -56,7 +56,7 @@ export default {
         }
       },
       {
-        test: /\.(sa|sc|c)ss$/i,
+        test: /\.css$/i,
         use: [
           MiniCssExtractPlugin.loader,
           {
@@ -64,8 +64,7 @@ export default {
             options: {
               url: false
             }
-          },
-          'postcss-loader'
+          }
         ]
       }
     ]
diff --git a/lib/generators/rolemodel/webpack/webpack_generator.rb b/lib/generators/rolemodel/webpack/webpack_generator.rb
index d62c37b6..8ba0a430 100644
--- a/lib/generators/rolemodel/webpack/webpack_generator.rb
+++ b/lib/generators/rolemodel/webpack/webpack_generator.rb
@@ -11,14 +11,6 @@ class WebpackGenerator < GeneratorBase
       webpack-cli
     ]
 
-    POSTCSS_PKGS = %w[
-      @csstools/postcss-sass
-      postcss
-      postcss-loader
-      postcss-preset-env
-      postcss-scss
-    ]
-
     WEBPACK_CSS_PKGS = %w[
       css-loader
       css-minimizer-webpack-plugin
@@ -46,7 +38,7 @@ def remove_obsolete_javascript_dependencies
     def add_npm_packages
       say 'Adding new dev dependencies to package.json', :green
 
-      dependencies = DEV_DEPS + POSTCSS_PKGS + WEBPACK_CSS_PKGS
+      dependencies = DEV_DEPS + WEBPACK_CSS_PKGS
       run "yarn add --dev #{dependencies.join(' ')}"
     end
 
@@ -59,17 +51,15 @@ def honeybadger_setup
       JS
     end
 
-    def replace_css_entrypoint_with_scss
-      say 'Replacing CSS entrypoint file with SCSS version', :green
+    def add_css_entrypoint
+      say 'Adding CSS entrypoint file', :green
 
-      remove_file 'app/assets/stylesheets/application.css'
-      copy_file 'app/assets/stylesheets/application.scss'
+      copy_file 'app/assets/stylesheets/application.css', force: true
     end
 
     def add_webpack_config
-      say 'Copying PostCSS & Webpack config files', :green
+      say 'Copying Webpack config file', :green
 
-      copy_file 'postcss.config.cjs', force: true
       copy_file 'webpack.config.js', force: true
     end
   end