I can't find a way to use variables in import directive for LESS.
I have got a #cdnUri variable which gets it's value from JavaScript:
#cdnUri: `window.cdnUri`;
cdnUri can be http://localhost/cdn in development mode or http://cdn.example.com in production mode.
What i want is importing other LESS file with this Urls prepended. Like this:
#import "#{cdnUri}/shared/twitter-bootstrap/less/bootstrap.less"
But it gives me this error because it doesn't parse the variables from url.
Couldn't load http://wordy/ui/frontend/themes/default2/ui/css/#{cdnUri}/ui/shared/js/twitter-bootstrap/less/bootstrap.less (404)
Thanks in advance.
This isn't a direct answer to your question, but LESS imports are always relative to the current file, so it's not possible to import from another domain.
It is a known less.js bug. It was a year to partially fix it.
Here is what you want:
LESS CSS, #import path from variable
Talk about this bug.
https://github.com/cloudhead/less.js/pull/1108
And here are the new sources.
Related
I am currently starting my first Vue3 project (I have done many Vue2 projects) and am currently facing errors when importing components.
In vue2/webpack, I was used to doing imports like this (in fact, phpstorm/webstorm is importing them for me like this)
import PageBase from "./components/PageBase";
This however yields
[vite] Internal server error: Failed to resolve import "./components/PageBase" from "src/App.vue". Does the file exist?
At first, I thought that it was due to the # vs ./ notation.
But later I noticed that it is actually about the .vue extension at the end.
import PageBase from "#/components/PageBase.vue";
and
import PageBase from "./components/PageBase.vue";
work just fine.
Is this the desired behaviour?
Its a bit confusing and inconvenient, as my IDE is importing it by default like this.
Ps: I am using an out of the box Vue3 setup like here: https://vuejs.org/guide/quick-start.html#with-build-tools
Thanks for any clarifications.
Until recentlly I was using the rather awkward dotless. I'm restricted to what I can use somewhat because I'm using VS2010, however I came across ServiceStack Bundler which seems to work great... apart from one thing.
My Less files are split using a directory structure - to simplify things, like this:
scaffolding/my-scaffolding.less
utilities/my-utilities.less
ui/my-ui.less
Each directories has many files, particularly with mixins etc.
In order to link them together, I've been using the #import function.
My main less file - main.less contains the following:
#import "utilities/all-utilities.less"
All utilities are listed here as it enables me to plug and play various file-sets. This code previously worked ok.
However I find ServiceStack won't pick up changes unless I reference all the less files individually and directly through the bundle file, which is a bit of a pain.
So, I can't use: main.less and import all sub files.
Instead, I have to use:
utilities/util1.less
utilities/util2.less
utilities/util3.less
and so on.
I'm using the ms build function to compile.
Any ideas?
/* UPDATE */
Tried the recommended answer below without success.
This is what I've tried so far:
Call a single less file that contains all #import declarations;
Does not trigger updates on compile.
Call all less files from bundle file and add #import statements to less files where necessary (note bundler won't compile without these);
Duplicates the #imported code as many times as the #import statement is used - even when (reference) directive is used, resulting in bloated/incorrect code.
You should be able to modify Bundler's bundler.js file to specify additional paths that less should search for when processing #import directives:
function compileLess(lessCss, lessPath, cb) {
var lessDir = path.dirname(lessPath),
fileName = path.basename(lessPath),
options = {
paths: ['.', lessDir], // Specify search paths for #import directives
filename: fileName
};
less.render(lessCss, options, function (err, css) {
if (err) throw err;
cb(css);
});
}
A mistake on my part, but one which wasn't easily spottable, so I'll post the reason for my problems so that others don't spend hours as I did chasing a solution to an unecessary problem.
I was using ServiceStack Bundler - I believe this issue would also have occured on on any solution using npm's less library.
My main issue was that none of my changes were triggered on compile. I use lots of #imports and numerous sub-directories for my less files so my first thoughts were the problem was due to subdirectories, and later, due to #import statements. However neither was correct.
I defined a bundle: main.css.bundle
Within the bundle I called my main less file that contained all the other #imported files: main.less
The issue was that less would normally reserve main.css, but the bundle also gives its output the same name based on the bundle name. So both were conflicting.
Change the bundle name or the main less file name and all should work.
Looking for a build-time CSS combiner/minifier that respects relative URL references.
That is, if one of the files I am combining is at
/path/to/style.css
and contains
background-image: url(images/my-image.png)
the resulting file should contain
background-image: url(/path/to/images/my-image.png).
Should work cross-platform Mac and PC, so either .NET via Mono or Node seem like obvious choices.
Check out WebAssets / Github
Asset management application for Python web development - use it to
merge and compress your JavaScript and CSS files.
It includes filters/ precompiles for cssmin, cssutils, yui_css, less, sass, clevercss, compass, scss, coffeescript, gzip, etc.
Specific to your question:
cssrewrite Source filter that rewrites relative urls in CSS files.
CSS allows you to specify urls relative to the location of the CSS
file. However, you may want to store your compressed assets in a
different place than source files, or merge source files from
different locations. This would then break these relative CSS
references, since the base URL changed.
This filter transparently rewrites CSS url() instructions in the
source files to make them relative to the location of the output path.
It works as a source filter, i.e. it is applied individually to each
source file before they are merged.
No configuration is necessary.
The filter also supports a manual mode:
get_filter('cssrewrite', replace={'old_directory', '/custom/path/'})
This will rewrite all urls that point to files within old_directory to use /custom/path as a prefix instead.
General Usage:
from webassets import Environment
my_env = Environment('../static/media', '/media')
""""As you can see, the environment requires two arguments,
the path in which your media files are located, as well as
the url prefix under which the media directory is available.
This prefix will be used when generating output urls. Next,
you need to define your assets, in the form of so called
bundles, and register them with the environment. The easiest
way to do it is directly in code:""""
from webassets import Bundle
js = Bundle('common/jquery.js', 'site/base.js', 'site/widgets.js', filters='jsmin', output='gen/packed.js')
my_env.register('js_all', js)
In this case you'll replace your js src with output.
Here is an alternate notation:
directory: ../static
url: /media
debug: True
updater: timestamp
bundles:
bundle-name:
filters: sass,cssutils
output: cache/default.css
contents:
- css/jquery.ui.calendar.css
- css/jquery.ui.slider.css
Also has special hooks for Django, Flask, Jinja2, Werkzeug..
Documentation is here. Hope this helps!
Here's a basic Python script that will combine all CSS files in a directory and replace references to your images folder:
import os
import fnmatch
output_text = ''
for filename in os.listdir('.'):
if fnmatch.fnmatch(filename, '*.css'):
output_text += open(filename, 'r').read()
output_text = output_text.replace('url(images', 'url(/path/to/images'))
f = open('combined.css', 'w')
f.write(output_text)
f.close()
This is off the top of my head and hasn't been tested, so it might contain errors.
In response to your comment:
Alternatively, you could use server-side CSS, like SASS/Compass or LESS.
With SASS/Compass you can dynamically change the path to assets (images) using the config.rb file, or from the command-line. You can toggle between relative and absolute paths easily in the same way. Your stylesheets are automatically compressed. To make sure that your files are combined, you can just create a master.scss file and #import each file. Most of my experience is with SASS but I believe LESS has similar features.
This is probably not ideal, however. It would be much simpler, portable, and more efficient to take care of this in a Python/Ruby script. It wouldn't take much effort to expand on the Python script above to make it compress the output file and match all relative paths. Then you can make it automatically run by having something like Foreman watching the build directory for changes.
I received a Flex project and when trying to compile it i get a few 1046 errors that say the Type was not found or was not a compile-time constant MyClass
however - the respective files are listed on the top of the file in an import clause like this:
import com.folder1.folder2.folder3.MyClass;
and if i check the folder structure, MyClass.as is there.
however, if i type this same line (import com.folder1.folder2.folder3.MyClass;) and check at each . what the autocompletion suggests, I see only a subset of the as classes that are actually there on the harddisk.
What determines which classes and folders are suggested by the autocompletion function? I don't get any compile error on the corresponding import statements that import MyClass
//edit:
screenshot 1 shows the file in which the error occurs that tries to import the class in question (Updater)
http://neo.cycovery.com/flex_problem.gif
screenshot 2 shows the file Updater.as
http://neo.cycovery.com/flex_problem2.gif
the censored part of the path matches in both cases (folder structure and package statement in Updater.as)
screenshot 3 shows where the error actually happens:
http://neo.cycovery.com/flex_problem3.gif
interestingly, the variable declaration
private var _updater:Updater = new Updater();
further up in the file does not give an error
This project is set up wrong. Its obvious your application can not find the classes.
Move your "com" folder and all of the contents into your "src" folder.
Or perhaps include the files in your source path?
right click on the project name->properties->flex Build Path->add folder
the import is based on the 'package' declaration within the file itself (at the top of the file). If the file's package declaration does not match the actual folder structure, you will get problems.
Check the classes you can't see in the autocompletion list. Maybe those classes' package name doesn't match the actual structure.
Rob
Check your actionscript source paths. Any chance that the folders you are seeing (events and objects) are in there explicitly, and the others are not? Normally, you have all your source inside a folder like src that is in the source path, so that the compiler can find anything anywhere inside it. But you can just as easily make your source paths too specific and just see a few things...
I'm stuck with this problem and I can't find a solution for it anywhere, so any ideas are welcome.
I want to execute some code on a #WebServlet (javax.servlet.annotation.WebServlet) before it loads my index.jsp. For that I added "/" to the urlPatterns. This does what it's expected in the index.jsp, but it doesn't load my css or image paths any more. The problem is the "/" makes it include all other files in these urlPatterns, but if I try to use "index" instead, it doesn't work.
Can someone please help?
Cheers,
M.
Just use an url-pattern which exactly matches /index.jsp.
#WebServlet(urlPatterns = { "/index.jsp" })
Unrelated to the concrete question, I wonder if you can't better use a ServletContextListener (which is annotable using #WebListener). This is certainly true when your sole functional requirement is to preload/preinitialize some application-wide data on server's startup, regardless of the first-opened webpage.