Grails 3.3.2集成Bootstrap报错及图片不显示问题求助

Let’s work through your problems step by step—they’re mostly tied to Grails 3’s updated asset pipeline behavior and a small configuration oversight.

1. Resolve "Bootstrap's JavaScript requires jQuery" Error #

Bootstrap’s JS relies entirely on jQuery, and unlike Grails 2, Grails 3 doesn’t auto-include jQuery by default. Here’s how to fix this:

• Add jQuery to your dependencies: Ensure the jQuery plugin is in your build.gradle file (if it’s missing):

  dependencies {
      // ... other existing dependencies
      compile 'org.grails.plugins:jquery:3.4.1' // Pick a version compatible with your Bootstrap version
  }
  

• Load jQuery before Bootstrap JS: In your mainBS.gsp layout (the one referenced by index.gsp), adjust the script order in the <head> or right before </body>:

  <!-- Load jQuery first to make it available globally -->
  <asset:javascript src="jquery.min.js"/>
  <!-- Then load Bootstrap's JavaScript -->
  <asset:javascript src="bootStrap/bootstrap.min.js"/>
  

  This guarantees jQuery exists when Bootstrap’s script tries to use it.

2. Fix Missing Images & Asset Loading Failures #

Your build.gradle assets configuration has a key mistake: you’re overwriting the includes property multiple times, so only the last entry (fonts/*) is being applied. Here’s the correction:

• Update the assets block: Combine all includes into a single list, and use **/* to cover files in subdirectories (since your Bootstrap files live in a bootStrap subfolder):

  assets {
      minifyJs = true
      minifyCss = true
      includes = ["stylesheets/**/*", "javascripts/**/*", "images/**/*", "fonts/**/*"]
  }
  

• Confirm asset directory structure: Double-check your files are in the correct assets subfolders:
  • assets/javascripts/bootStrap/bootstrap.min.js
  • assets/stylesheets/bootStrap/bootstrap.min.css
  • assets/images/grails-cupsonly-logo-white.svg (so your <asset:image> tag can find it)
• Include Bootstrap CSS in your layout: Add this line to the <head> section of mainBS.gsp:

  <asset:stylesheet src="bootStrap/bootstrap.min.css"/>
  

3. Final Cleanup & Rebuild #

After making these changes, run these commands to clear cached assets and rebuild your project:

grails clean
grails compile
grails run-app

This should fix both the jQuery error and missing images.

内容的提问来源于stack exchange，提问作者Sherif