F
F
Fahrenhei72015-05-30 03:04:43
css
Fahrenhei7, 2015-05-30 03:04:43

Error with compass sprites, how to solve?

Hello! There was a problem with the sprites. After including it in the project, such a message appears in the console, the sprites themselves do not work.

GET file:///images/icons-s5f82c8d186.png net::ERR_FILE_NOT_FOUND

What is written in scss files:
Main file
// deafult imports
@import "compass/reset";
@import "compass/utilities";
// @import "parts/normalize";
// @import "parts/variables";
// @import "parts/mixins";
@import "../images/icons/*.png";
//sections
@import "parts/header-section";

And the part of the file where the sprite is used:
.left-side-button {
  		background-color: $lsbutton-color;
  		margin-left: 15px;
  		margin-top: 17px;
  		width: 60px;
  		height: 60px;
  		div {
  			@include icons-sprite(lsbutton-bg);
  			width: 30px;
 		 	height: 28px;
  		}

Please help me solve the problem.
All pictures in the icons folder of the extension .png
config, rb
require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = ""
css_dir = "css"
sass_dir = "sass"
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

# 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 && rm -rf sass && mv scss sass

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Langolf, 2015-05-30
@langolf

Most likely it does not see the file due to an incorrect relative in the link. Try to remove the relativity in the image import link
Either
@import "/images/icons/*.png";

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question