Merge pull request #96 from loftwah/dl/font-awesome-broken

Dl/font awesome broken

app/assets/config/manifest.js

@@ -1,5 +1,5 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_directory ../stylesheets .scss
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
-//= link_tree ../builds
+//= link application.css

app/assets/stylesheets/application.css.scss

@@ -0,0 +1 @@
+@import "font-awesome";

app/javascript/entrypoints/application.js

@@ -3,6 +3,7 @@ import "chartkick/chart.js";
 import "flowbite";
 
 import "../../assets/stylesheets/application.css";
+import '../../assets/stylesheets/application.css.scss'
 import "../../assets/stylesheets/application.tailwind.css";
 
 Rails.start();

app/views/layouts/application.html.erb

@@ -10,6 +10,7 @@
     <%= vite_client_tag %>
     <%= vite_javascript_tag 'application' %>
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Generic Open Graph Meta Tags (for general application pages) -->
     <%= tag.meta property: 'og:type', content: 'website' %>

config/application.rb

@@ -18,6 +18,8 @@ class Application < Rails::Application
 
     config.middleware.use PageViewTracker
 
+    # config.assets.paths << Rails.root.join("node_modules")
+
     # Configuration for the application, engines, and railties goes here.
     #
     # These settings can be overridden in specific environments using the files

config/initializers/assets.rb

@@ -10,3 +10,6 @@
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
+
+Rails.application.config.assets.precompile += %w( *.scss )
+Rails.application.config.assets.precompile += %w( application.css.scss )

config/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}',
     './node_modules/flowbite/**/*.js',
-    './app/assets/stylesheets/**/*.css',
+    './app/assets/stylesheets/**/*.{css,scss}',
   ],
   theme: {
     extend: {

vite.config.mts

@@ -9,19 +9,20 @@ export default defineConfig({
   build: {
     rollupOptions: {
       input: {
-        application: 'app/javascript/entrypoints/application.js' // Path to your main JS entry point
+        application: 'app/javascript/entrypoints/application.js'
       }
     },
   },
   css: {
     preprocessorOptions: {
       scss: {
         includePaths: [
-          path.resolve(__dirname, 'node_modules'), // Ensure Vite looks in node_modules for styles
-          path.resolve(__dirname, 'app/assets/stylesheets') // Include your stylesheets directory
+          path.resolve(__dirname, 'node_modules'),
+          path.resolve(__dirname, 'app/assets/stylesheets')
         ],
+        // Remove the additionalData line that was causing the circular import
       },
     },
   },
-  assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg'] // Include any other assets you want to be processed
-});
+  assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg', '**/*.eot', '**/*.ttf', '**/*.woff', '**/*.woff2']
+});