2015-07-30 22 views
5

Tôi đang gặp một số khó khăn khi tích hợp SemanticUI vào dự án Laravel của tôi. Đây là cả hai khuôn khổ đẹp, tiếc là không có gì để tìm về chủ đề này.Sử dụng SemanticUI cho dự án Laravel của tôi

Trước tiên, tôi đã cài đặt ngữ nghĩa bằng cách sử dụng NPM: npm install semantic-ui. Điều này làm việc tốt, nhưng vấn đề là rất nhiều gói npm khác được cài đặt là tốt. Ngoài ra, tàu biển ngữ nghĩa với rất nhiều nhiệm vụ gulp mà tôi không cần. Laravel đi cùng Elixer để xác định các nhiệm vụ cơ bản của Gulp, mà tôi muốn sử dụng.

Tôi đã truy cập semantic github repo và tải xuống thư mục /src. Tôi đã sao chép thư mục vào dự án Laravel của tôi: /resources/assets/semantic/. Sau đó, trong app.less file tôi nhập khẩu ngữ nghĩa:

/** 
* Import the SemanticUI source 
*/ 
@import '../semantic/src/semantic'; 

Vì vậy, bước tiếp theo là để cho Elixer làm biên dịch và sao chép vào thư mục /public:

elixir(function(mix) { 

    // Semantic LESS 
    mix.less([ 
     'app.less' 
    ], 'public/vendor/semantic/semantic.css'); 

    // Semantic JS 
    mix.scriptsIn([ 
     'resources/assets/semantic/src/definitions/' 
    ], 'public/vendor/semantic/semantic.js'); // js: resources/assets/semantic/src/definitions/{folder}/{script}.js 

    // Semantic Themes 
    mix.copy('resources/assets/semantic/src/themes', 'public/vendor/semantic/themes'); 

}); 

này hoạt động tuyệt vời. Điều duy nhất tôi quan tâm là việc cập nhật ngữ nghĩa phải được thực hiện bằng tay. Nếu bạn có bất kỳ lời khuyên nào cho tôi hoặc một sự thay thế khác, tôi rất muốn nghe điều đó. Đây là cách thư mục public/vendor của tôi trông giống như sau khi chạy gulp:

public/vendor

Bây giờ vấn đề khác mà tôi đang phải đối mặt là khi tôi hãy nhìn vào CSS minified, tôi thấy rằng các đường dẫn tài sản là sai:

src: url("../../themes/default/assets/fonts/icons.eot"); 
// and more wrong paths... 

Cần tìm kiếm trong themes/default/assets/fonts/icons.eot. Bất kỳ ý tưởng?

Xin cảm ơn trước.

+1

Bạn cần phải ghi đè '@ biến fontPath' ... Xem http://learnsemantic.com/developing/customizing.html#setting-global-variables. (Rõ ràng, vì bạn di chuyển thư mục 'themes' của bạn (bao gồm' asset') và CSS kết quả của bạn không có ở đường dẫn được giả định bởi SUI, bạn sẽ nói với mã SUI nơi đường dẫn mới là). –

Trả lời

3

Khi họ hỏi loại cài đặt nào tôi muốn có, tôi đã chọn Express (Set components and output folder).

Sau đó, tôi đã chọn [?] Where should we put Semantic UI inside your project? resources/assets/semantic/.

Chọn tùy chọn của bạn cho các câu hỏi khác.

Sau đó, gõ ../../../public/semantic khi được nhắc [?] Where should we output Semantic UI?

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