Comments (6)
Fixed Compass filter for using helpers like image-url(). Closed by fcf6978.
from webassets.
Boy, the compass filter really is a hard one.
I have committed a fix for this, though some notes:
First, I'm using a very new Compass version here (0.11.beta.5), your results with older versions may vary.
Second, I'm setting the images base url to MEDIA_URL/STATIC_URL. That means, you need to use:
background-image: image-url("images/interface/arrow_back.png")
to reference the image. This is for two reasons. Number one, this is consistent with using the inline-image filter, which also needs a path relative to MEDIA_ROOT:
background-image: inline-image("images/interface/arrow_back.png")
Number two, webassets has no concept of an "images" directory. That all images files are in the same directory is something Compass-specific. webassets could call Compass with the assumption that all images are in {MEDIA_ROOT}/images, but that would be arbitrary.
However, I am open to making this an option. Specifically, now that the filter has to write a configuration file anyway, one could image a COMPASS_CONFIG option that takes a dict and allows you to customize freely:
COMPASS_CONFIG = {
'http_images_dir': "/img",
'images_dir': "img"
}
from webassets.
Awesome! This is actually inline with the way I currently use compass so no qualms from me ;)
from webassets.
ok, so I've just updated to 0.6 and I'm running into an issue that I can't sort out (yet)
Not sure if its related, but I'm getting the following error:
compass: subprocess had error: stderr=WARNING: 'loading.png' was not found (or cannot be read) in /private/var/folders/0p/tr2njscx6159lf63fp7b8lc40000gn/T/tmpWqhkCx/images/images/bookends
where I have
image-url('images/bookends/loading.png')
seems like somehow images is getting in the path twice. I'm going to keep digging, but I thought I would post here just in case.
from webassets.
based on this:
['compass',
'compile',
'--sass-dir',
u'/Users/cwd/Dropbox/src/warner/src/warner/media/static/sass',
'--css-dir',
'/var/folders/0p/tr2njscx6159lf63fp7b8lc40000gn/T/tmpWqhkCx',
'--image-dir',
'/Users/cwd/Dropbox/src/warner/src/warner/../warner/media/static/',
'--config',
'/var/folders/0p/tr2njscx6159lf63fp7b8lc40000gn/T/tmpWqhkCx/.config.rb',
'--quiet',
'--boring',
'--output-style',
'expanded',
u'/Users/cwd/Dropbox/src/warner/src/warner/media/static/sass/main.sass']
it seems almost like the --image-dir
option is being ignored? The path it is searching on is the same one defined for css :\
I updated some other projects to 0.6 and have not had this same problem. I'm probably missing something small in this one project...
from webassets.
ok, sorry for all the posts here. I fixed my issue. I think the images part of the error above was just a red haring. It seems I was missing a .sass file, which showed up at the very end of a long error message (which mostly just talked about broken images)
from webassets.
Related Issues (20)
- jsmin/rjsmin removes blanks in ES6 Template Strings HOT 1
- Fail when packing an external resource HOT 4
- YAMLLoadWarning yaml.load is deprecated
- Bundles cannot be replaced/re-added
- --line-comments is deprecated
- LibSASS - Unable to use other compile options like source_comments
- Version 2: Couldn't find preset HOT 3
- Threading.isAlive was removed in Python 3.9
- Load_builtin_filters doesn't work as expected with PyInstaller
- Deprecation warning due to invalid escape sequences in Python 3.7
- Fix simple typo: ultimatily -> ultimately
- Closure: ReferenceError: $jscomp is not defined
- Copy assets
- SCSS filter runs command sass without --scss HOT 2
- Add a tool to remove unused css
- How to configure filters using the YAML config option? Specifically cssrewrite. HOT 1
- Jinja2 Base template loaded twice when upgrading werkzeug package
- Add a way to get all bundle names
- 'out' is deprecated and will stop functioning in TypeScript 5.5
- mode merge=False not implemented in flask_assets
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webassets.