Note that there are some explanatory texts on larger screens.

plurals
  1. POCompass is adding path to my data uri
    primarykey
    data
    text
    <p>I am using the <a href="http://compass-style.org/reference/compass/helpers/inline-data/" rel="nofollow">Compass inline-image helper</a> in my project but while it does seem to be creating a data uri it also is adding a path to the start of the result.</p> <p>I have no errors from <code>compass watch</code> either.</p> <p>Here is the SCSS:</p> <pre><code>.myelement { display: block; float: right; height: 42px; text-indent: -10000px; width: 29px; background-image: inline-image('myimage.gif'); } </code></pre> <p>And here is the compiled CSS:</p> <pre><code>.myelement { background-image: url("http://myproject/foo/bar/css/data:image/gif;base64,R0lGODlhDgDVAOZIAN7d3PDICPz7+eLh4O7t6/333ODf3f/+/P79+/f29Pn49/X08+no5+rp5/HLFPXcYvLOJffjgubl5PTWSPvwvPb18/788N/e3fj39fjmkfXbXPbdaPruse3s6+zr6ffhdvDJDubl4+vq6Prus/Tz8fPy8Ozr6vv6+OTj4f777vvxv/HMGfTVQvLPKPbea/zzyPXZVPDv7fnpnPfgdPfifPzzy+jn5fDJC+rp6Pz10fz0zvHKEfPSNPHw7/355fvxwuDf3uTj4vTz8vPTOfXbX/rsqPr59/343////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEgALAAAAAAOANUAAAfygEiCgz0Kg4eHAkAMiI0dAAAJjYMnF5AhiEYkBDYDkJAoDTEVAgSfp6cGkh6opxcVgw2tkEKHCJ6oJo0GrTiIArMSiBiQDBglQQADiAsihoMLEgiT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8AAwocSLCgwYMIEypcyLChw4cQI0qcSPGbjALXLKzQcI1GgAAvqvkA8ZEFoiMcIsCA8PEjjwcZfliI0LJmTQc1kMywWXOHikEPeAa4MeLQAZY2PzRywHMDohRCJyDK8ZGIjiJDArRARMEFxkEUJhwQFAgAOw=="); display: block; float: right; height: 42px; text-indent: -10000px; width: 29px; } </code></pre> <p>As you can see, the data uri is being generated but <code>http://myproject/foo/bar/css/</code> is getting added which makes the url invalid.</p> <p>My config.rb:</p> <pre><code>require "zurb-foundation" # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "images" javascripts_dir = "js" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :compressed # To enable relative paths to assets via compass helper functions. Uncomment: relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss &amp;&amp; rm -rf sass &amp;&amp; mv scss sass </code></pre> <p>Any help is appreciated.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload