2013-08-05 22 views
5

Tôi đang làm việc trên một dự án moovweb sử dụng la bàn. Ngay bây giờ, tôi đang thực hiện hỗ trợ cho hình ảnh 2x cho sprites.La bàn cho lỗi Loại tệp không được công nhận: png '))

Những gì tôi đang làm là để cho la bàn tạo sprite 1x, như vậy:

$icons-dimensions: true; 
@import "icons/*.png"; 
@include all-icons-sprites; 

Và sau đó, ngay sau này, tôi đang kể và thực hiện các tập tin SCSS mà sẽ tạo ra các quy tắc sprite cho 2x (sử dụng các truy vấn phương tiện truyền thông):

@import "../_retina-sprites.scss"; 
$icons2x: sprite-map("icons2x/*.png"); 
.icons-logo { 
    @include retina-sprite(logo, $icons2x); 
} 

.icons-túi { @include võng mạc-ma (túi, $ icons2x); }

Tôi tạo ra này _retina-sprites.scss (dựa trên Adam Brodzinski's version) để chứa một mixin để thêm sự cai trị phương tiện truyền thông truy vấn để lựa chọn những hình ảnh 2x như vậy:

@import "compass/utilities/sprites";   // Include compass sprite helpers 
@import "compass/css3/background-size";  // Include helper to calc background size 

@mixin retina-sprite($name, $sprites2x) { 
    background-repeat: no-repeat; 
    @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { 
    & { 
     $pos: sprite-position($sprites2x, $name); 
     background-image: sprite-url($sprites2x); 
     background-position: nth($pos, 1)/2 nth($pos, 2)/2; 
     @include background-size(ceil(image-width(sprite-path($sprites2x))/2) auto); 
    } 
    }  
} 

Tuy nhiên, tôi nhận được này đầu ra khi tạo sprite trên dòng mà các cuộc gọi sprite-path():

Syntax error: Unrecognized file type: png')) 

mà làm cho tôi nghĩ rằng la bàn được viết một ma-url thay vì một ma-con đường, do đó đem lại cho ')) suffi x vào tên tệp.

Có ai đến đây trước đây không?

Trả lời

4

Không chắc chắn vấn đề có thể là gì, nhưng bạn có thể chạy la bàn trực tiếp để có thể có được kết quả tốt hơn hoặc hiểu rõ hơn về những gì đang xảy ra.

SDK moov sử dụng lệnh la bàn sau để biên dịch tài sản của bạn:

compass compile <my-project-path>/assets --relative-assets --sass-dir stylesheets --css-dir stylesheets/.css --images-dir images --require sass/plugin 

Hy vọng chạy điều đó bằng tay có thể cung cấp cho bạn thêm thông tin.

+2

Xin chào @noj, điều đó thực sự đã giúp tôi xác định vấn đề. Lý do là rất nhiều chức năng spriting được bao gồm sau khi la bàn phiên bản 0.11.7 (antares). Tôi đã sử dụng một số trong những đoạn mã đó. Trên môi trường địa phương của tôi, tôi có la bàn 0,12,2 (Alniman), hoạt động tốt. Nhưng trên môi trường tích hợp, tôi chỉ có 0.11.7, không hoạt động. Cảm ơn bạn đã giúp đỡ! – fegemo

0

Tôi gặp lỗi tương tự khi tôi có hình ảnh JPG trong cùng thư mục với PNG, vui vẻ đủ.

Khi tôi đã xóa các JPG đó, nó hoạt động.

0

Tôi đã gặp lỗi này ngay hôm nay.

Điều này thực sự là do các tệp PNG trống (như trong 0kb)

Các vấn đề liên quan