Các yếu tố cần thiết để thay đổi đường dẫn tương đối trong css biên dịch

Question

Tôi đang sử dụng Web Essentials 2013 trong một dự án để biên dịch ít hơn cho css khi xây dựng/lưu. Tuy nhiên, tôi đang gặp vấn đề với điều đó khi biên dịch, CHÚNG TÔI là giả mạo các đường dẫn tương đối so với phông chữ/hình ảnh vv

Ví dụ:

.footer { 
    background: url('../img/footer_background.svg') no-repeat top center; 
} 

trở thành:

.footer { 
    background: url('img/footer_background.svg') no-repeat top center; 
} 

tôi nhớ lại có một vấn đề trước khi simillar, nhưng cài đặt "Điều chỉnh đường dẫn tương đối" để sai trong các tùy chọn CSS cần thiết web cố định nó sau đó. Nó dường như không làm điều đó bây giờ. Tôi đã thử cả sự ổn định mới nhất và tối tân mới nhất, cả hai đều cho hành vi tương tự.

Mọi đề xuất? :)

Answer 1

Tôi cũng sử dụng Web Essentials cho LESS và trong khi tôi chưa thấy nó làm điều này, tôi có giải pháp tốt hơn cho bạn. Thay vì viết đường dẫn trong mã của bạn, đặc biệt nếu tất cả những gì bạn đang thay đổi chỉ là tên tệp ở cuối, hãy thử sử dụng biến cho đường dẫn của bạn. Ví dụ:

@imgURL: "../img"; 

Sau đó, để sử dụng nó, tất cả các bạn cần là:

.footer{ 
background: url("@{imgURL}/footer_background.svg"); 
} 

Answer 2

Tôi đang trải qua cùng một vấn đề này với bootstrap, trong đó sử dụng đường dẫn tương đối cho các phông chữ. Tôi tin rằng vấn đề nằm ở số node-sass hoặc libsass.

Tôi không thể tìm thấy thông tin về viết lại đường dẫn tương đối trong thư viện, tuy nhiên. Nếu nó có thể được sửa chữa, sau đó một sửa chữa có thể là để thả trong một phiên bản nút sass mới.

Thật không may, tôi không thể tìm thấy nơi WebEssentials được cài đặt trên hệ thống của tôi để kiểm tra điều này.

Tôi vừa nhận ra bạn đang gặp vấn đề với trình biên dịch LESS chứ không phải SASS. Tôi tự hỏi nếu vấn đề có nhiều hơn để làm với CSS minifier bây giờ.

Tôi đã thay đổi "Thư mục đầu ra tùy chỉnh" thành "../" là nơi tôi muốn viết. Điều này gây ra việc viết lại. Nếu tôi để trống, đường dẫn tương đối sẽ bị bỏ lại một mình.

Answer 3

Tôi cũng đã tham gia chương trình này. Nó được sử dụng cho một vấn đề trong các phiên bản trước của Web Essentials, nhưng cuối cùng đã được sửa. Bây giờ nó có vẻ đã bị cắt lên vào năm 2013.

Một cách mà tôi đã thấy để khắc phục điều này là để thoát khỏi đường dẫn url, điều này làm cho trình biên dịch kém xử lý giá trị dưới dạng chuỗi ký tự, nó đi qua như-là mà không cần chạm vào nó.

ví dụ: hình nền: ~ "url ('../../../ img/foo.png')";

sẽ phát ra dưới dạng: hình nền: url ('../../../ img/foo.png');

Answer 4

Tôi biết bạn đã đề cập đến năm 2013, nhưng tôi đã gặp vấn đề tương tự trong năm 2015 và thấy nếu tôi đặt "relativeUrls": false trong compilerconfig.json.defaults thì sự cố đã đề cập sẽ dừng. Để tham khảo tôi đang sử dụng VS 2015 Pro upd2 và phần mở rộng Web Compiler v1.11.315.

Answer 5

Trong trường hợp bất kỳ ai vẫn tiếp tục điều này, trong bundleconfig của bạn.json thêm khóa adjustRelativePaths với các tùy chọn việc rút gọn như sau:

"minify": { "enabled": true, "adjustRelativePaths": false }

chìa khóa này được sử dụng trong BundleHandler lớp tĩnh here, nhìn vào phương pháp AdjustRelativePaths.