.png)
Grails, twitter bootstrap and sass plugin
Prerequisites
To use sass in a grails application, we will need to install JRuby. Once JRuby is installed, we will also need to install compass. You can easily install compass via gem:
Setup
Once JRuby and sass are successfully installed, just add the following line in your "BuildConfig.groovy".
Now, to see if the sass was installed correctly, try 'grails run-app' at least once. The plugin should generate a 'GrassConfig.groovy' file. By default this is what it looks like:
Next, download bootstrap (Choose the one under sass). Unzip the file and you should see a vendor folder with an assets folder inside. Inside the assets folder is a bootstrap folder and a 'bootstrap.scss' file. Copy the folder and the file and place it inside your '/src/stylesheets' folder (as specified in 'sass_dir' variable in the GrassConfig.groovy). Here is what it should look like:
Next, move the javascript files from "bootstrap/vendor/assets/javascripts" to your app's "web-app/js" folder.
The fonts should also be moved from "bootstrap/vendor/assets/fonts" to your app's "web-app/fonts" folder. This is how it should look like:
We're almost done! Now on the terminal, simply run:
This command will compile the scss files and generate the necessary css files for bootstrap to be applied on your application. While the command is running, you should see something like this:
At this point, if you try a "grails run-app" command, you will most likely encounter this error:
This error happens when we don't specify the path for the fonts. To resolve this, open the '_variables.scss' and replace this line :
with this:
Hit the "grails compile-css" command.
Then do another "grails run-app" command.
This time the errors should completely disappear and Bootstrap should be completely ready for insertion in your gsp files. In the future, should you decide to create a custom scss file, remember to place it inside the "src/stylesheets" folder. :)
To use sass in a grails application, we will need to install JRuby. Once JRuby is installed, we will also need to install compass. You can easily install compass via gem:
Setup
Once JRuby and sass are successfully installed, just add the following line in your "BuildConfig.groovy".
Next, download bootstrap (Choose the one under sass). Unzip the file and you should see a vendor folder with an assets folder inside. Inside the assets folder is a bootstrap folder and a 'bootstrap.scss' file. Copy the folder and the file and place it inside your '/src/stylesheets' folder (as specified in 'sass_dir' variable in the GrassConfig.groovy). Here is what it should look like:
Next, move the javascript files from "bootstrap/vendor/assets/javascripts" to your app's "web-app/js" folder.
The fonts should also be moved from "bootstrap/vendor/assets/fonts" to your app's "web-app/fonts" folder. This is how it should look like:
We're almost done! Now on the terminal, simply run:
This command will compile the scss files and generate the necessary css files for bootstrap to be applied on your application. While the command is running, you should see something like this:
At this point, if you try a "grails run-app" command, you will most likely encounter this error:
This error happens when we don't specify the path for the fonts. To resolve this, open the '_variables.scss' and replace this line :
with this:
Then do another "grails run-app" command.
This time the errors should completely disappear and Bootstrap should be completely ready for insertion in your gsp files. In the future, should you decide to create a custom scss file, remember to place it inside the "src/stylesheets" folder. :)
