I am having trouble with the plugin. Everything seemed fine but after running the app in dev env, the page loads up but complains that it can't find the compiled css file. I am using Grails 2.0.1 and lesscss-resources 1.3.0.
Here is what I have in UiResources.groovy:
styling {
defaultBundle 'styling'
resources url: '/less/mainStyles.less', attrs:[rel: "stylesheet/less", type: 'css'], disposition: 'head', bundle: 'bundle_styling'
resources url: '/css/other.css', disposition: 'head'
}
What shows up on the page is this:
< link href="/appName/bundle-bundle_styling_head.css" type="text/css" media="screen, projection" rel="stylesheet" >
Although I can locate this file in the
~/.grails/2.0.1/projects/appName/tomcat/worl/Tomcat/localhost/appName/grails-resources ...
Grails console also complains:
Resources not found: /bundle-bundle_styling_head.css
I have been trying different things to get this to work till no avail. Did I do anything wrong here?
I had a similar problem and found that removing the bundle option fixed the problem. So remove ", bundle: 'bundle_styling'" making the line:
resources url: '/less/mainStyles.less', attrs:[rel: "stylesheet/less", type: 'css'], disposition: 'head'
Hope this works for you too.
Be aware what the docs say currently in the issues section - maybe you are facing one of the bugs:
For the Bundle to work you must have a .css file at the end of the bundle, even if it is just a blank file.
Must specify the default bundle manually as this is calculated based on file extension by default.
I just had a case where I specified this in an inplace plugin (MyPluginApplicationResources.groovy)
resource url:'/less/eip.less', attrs:[rel: "stylesheet/less", type:'css'],defaultBundle: 'eip'
resource url: '/css/dummy.css', defaultBundle: 'eip'
There was no error but also no css rendered by the plugin, so I changed it to:
resource url:[dir: '/less', file : 'eip.less', plugin: 'my-plugin'], attrs:[rel: "stylesheet/less", type:'css'],defaultBundle: 'eip'
resource url: '/css/dummy.css', defaultBundle: 'eip'
This worked for me.
dummy.css : this is an empty css file (see issues) - but I haven't tested if its really needed.
Related
After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.
For example, the following CSS no longer works:
:host([part="my-part"]) [part="reveal-button"]::before {
content: url("../images/my-image.svg");
}
It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:
ERROR in ../node_modules/#vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\#vaadin\flow-frontend\styles\components'
The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.
Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?
With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules
Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?
As in that case the css would end up inside node_modules which might make a difference to the resolving.
As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.
Until release of 14.6.2 you can add the raw-loader dependency to a java class with
#NpmPackage(value = "raw-loader", version = "3.1.0")
and then add to webpack.config.js the lines
if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.
The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?
With the new theme structure, I've used the following css to import images in css:
background: url('./images/fire.png');
And that was placed in a file: frontend/themes/mythemename/mythemefile.css
I've recently upgraded a grails app to 2.4.3 and in the process upgraded the resources plugin to 1.2.14. I realize the assets plugin is preferred at this point, but I cannot make the switch just yet. I have the following defined in my ApplicationResources.groovy
modules = {
core {
resource url: '/js/main.js', disposition: 'head'
resource url: '/lib/bootstrap/css/bootstrap.css', disposition: 'head'
... more here
}
}
When I run the app, I get the following:
| Error 2015-02-01 23:13:40,005 [localhost-startStop-1] ERROR resource.ResourceMeta - Resource not found: /lib/bootstrap/css/bootstrap.css
If you look at the image I've attached, you can see that this file is indeed in the correct place, and this worked with an older version of the resources plugin.
The Grails Resources plugin uses the grails.resources.adhoc.patterns and grails.resources.adhoc.includes values in Config.groovy to determine which resources to process. Perhaps this behavior changed across versions and you need to add the lib directory like so:
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/lib/bootstrap/css/*']
grails.resources.adhoc.includes = ['/images/**', '/css/**', '/js/**', '/plugins/**', '/lib/bootstrap/css/**']
I know it is a very old question, but thought my finding would helpful to someone. If we place grails.resources.resourceLocatorEnabled = false in Config.groovy file then it should work. No need to add grails.resources.adhoc property.
I currently have this directory layout:
project
web
app.html
main.dart
templates
app.html
alerts.html
menu.html
components
AppComponent.dart
AlertsComponent.dart
MenuComponent.dart
resources
css
bootstrap.css
My components look like:
#Component(
selector: 'app',
templateUrl: 'templates/app.html'
)
class AppComponent { ... }
My application's index.html (in another project) is served from /client, and project/web is served from /project. The above works in Dartium, but I get errors from pub build:
[Warning from _Serial on project|web/main.dart with input project|web/components/AppComponent.dart]:
line 3, column 1 of web/components/AppComponent.dart: Unable to find templates/app.html at project|templates/app.html
#Component(
^^^^^^^^^^^
and
[Warning from _Serial]:
Unable to find webatara|web/main.dart from html_files in pubspec.yaml.
and
[Warning from TemplateCacheGenerator]:
Can't find asset web/web/templates/app.html.
depending on what combination of paths I use in templateUrl and html_files (for Angular's transformer).
What, exactly, should go where and how should it be referenced in templateUrl and pubspec.yaml?
Update: I can get rid of my build errors by moving my templates to the lib directory and using templateUrl: 'packages/project/templates/app.html', but then Dartium tries to load that as /packages/project/templates/app.html, and not /project/packages/project/templates/app.html, which would be correct. I don't see any way to tell it what the base URL is.
but then Dartium tries to load that as
/packages/project/templates/app.html, and not
/project/packages/project/templates/app.html, which would be correct.
I don't see any way to tell it what the base URL is.
I believe you are using angulardart 1.1.1 or 1.1.2? We had the same issue in our project after switching from 1.1.0 to 1.1.2. This is weird behaviour that was added since version 1.1.1.
For some reason default package root in AngularDart now is '/packages/'. This causes generation of root-relative URLs. In your case it generates
/packages/project/templates/app.html
instead of
packages/project/templates/app.html
It's OK while you app is in the root of your domain. But in your case what you need to do is to add following to your initialization method in main.dart:
bind(ResourceResolverConfig, toValue: new ResourceResolverConfig
.resolveRelativeUrls(true, packageRoot: 'packages/'));
This will override angular's default packages root and will make it generate correct relative URLs.
Hope it helps.
I want to use fontawesome plugin in grails.
I have added in build config compile :font-awesome-resources:4.0.3.1 to add plugin.I have added
customBootstrap
{
dependsOn 'font-awesome'
resource url: 'css/bootstrap.css'
resource url: 'js/bootstrap.js' resource url: 'css/bootstrap-fixtaglib.css'
}
in applicationresource.groovy but when i run the application get error
ERROR resource.ResourceProcessor - Unable to load resources Message: No such property: pluginManager for class: org.springframework.web.context.support.XmlWebApplicationContext.Please provide solution.
I am not sure whether this is a configuration issue with migration from earlier grails versions or if font-awesome has not been migrated completely to grails 2.4.x. But I encountered this as well.
As a short (dirty) workaround, you can replace the code that causes the problem directly on the plugin.
File (replace X with your project name):
~/.grails/2.4.2/projects/X/plugins/font-awesome-resources-4.0.3.1/grails-app/conf/FontAwesomePluginResources.groovy
Replace lines 3 and 4 with:
def pluginManager = grails.util.Holders.pluginManager
def lesscssPlugin = pluginManager.getGrailsPlugin('lesscss-resources') || pluginManager.getGrailsPlugin('less-resources')
And give it a go.
I'm using Grails 2.0 and specified my css stylesheets and javascript files in the application resources file so that I can use syntax like <r:require modules="common"/>
In my resource file I have specified a css file which in turn uses in image background...
jrac {
dependsOn 'jquery-dev'
resource url: '/js/misc/jrac.js'
resource url: '/css/misc/jrac.css', bundle:'bundle_style'
}
jrac.css
...
.jrac_loading {
background-image: url('../../images/misc/loading.gif');
}
The issue is that when I run this in the browser, the parsed file changes the url to:
background-image: url('resource:/images/misc/loading.gif');
So the image doesn't work, does anyone have any ideas why?
Turns out the issue was with the lesscss plugin. If you use this plugin you must set your less output to a separate bundle, otherwise url rewriting doesn't seem to play well.