如何ExtJS的創建自定義SASS與煎茶CMD編譯

我有我的應用程序內置有ExtJS 4.2.1如何ExtJS的創建自定義SASS與煎茶CMD編譯

用在我的應用程序一些自定義CSS給予個性化的風格讓使用Sencha Cmd v4.0.1.45.

林生成我的應用程序結構我的XTemplate項目，也是我使用AwesomeFont和FamFam圖標的精靈。

這是在我的應用程序煎茶CMD結構我的資源目錄：

enter image description here

App.css是一個自定義CSS
BoxSelect.css是其他自定義CSS
chooser.css是其他自定義CSS
famfamfam.css是將處理famfam.png圖像精靈的CSS
font.css是AwesomeFont附帶的CSS。

在開發模式（無建築）應用程序的偉大工程，但是當我試圖使用Sencha CMD生成並嘗試打開生產的Index.html我看不到任何應用圖標無論是款式來自我的自定義CSS文件。

因此，我最終修改了我的應用程序Index.html，以便將所有CSS引用移動到標記之外。

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Application</title> 


    <!-- <x-compile> --> 
    <!-- <x-bootstrap> --> 
    <link rel="stylesheet" href="bootstrap.css"> 


    <script src="ext/ext-dev.js"></script> 

    <script src="bootstrap.js"></script> 
    <!-- </x-bootstrap> --> 


    <!-- Ext Scheduler --> 
    <script src="lib/js/sch-all-debug.js"></script> 

    <script src="../Scripts/jquery-2.1.1.min.js"></script> 
    <script src="../Scripts/jquery.vegas.min.js"></script> 
    <script src="../Scripts/jquery.signalR-2.0.3.min.js"></script> 

    <!-- Ext Scheduler --> 
    <link rel="stylesheet" href="resources/css/sch-all-neptune.css"> 

    <link rel="stylesheet" href="../Content/jquery.vegas.min.css"> 

    <script src="app/Constants.js"></script> 
    <script src="app/Glyphs.js"></script> 
    <script src="app.js"></script> 

    <!-- </x-compile> --> 

    <link rel="stylesheet" href="resources/css/app.css"> 
    <link rel="stylesheet" href="resources/css/boxselect.css"> 
    <link rel="stylesheet" href="resources/css/fonts.css"> 
    <link rel="stylesheet" href="resources/css/famfamfam.css"> 
    <!-- view icons chooser style --> 
    <link rel="stylesheet" href="resources/css/chooser.css"> 


</head> 
<body></body> 
</html>

這樣做工作正常，但我想創建一個SASS，以便我的自定義CSS文件可以縮小。

任何線索我必須遵循什麼步驟來創建我的自定義CSS的SASS，所以在做sencha app build production我的CSS被縮小？

感謝任何幫助。

來源

2014-09-12 VAAA

在您的應用程序文件夾中，應該有sass文件夾。將您的CSS樣式表移動到sass/etc/並重命名爲*.scss，然後運行sencha app build。這應該做的伎倆。

一個告誡：我記得在某些時候Cmd存在一個錯誤，它沒有拾取額外的SCSS文件。如果上面的解決方案不適合你，手動連接所有的CSS文件到sass/etc/all.scss，它應該工作。

來源

2014-09-12 16:59:32

非常感謝亞歷克斯，是的，我有一個SASS文件夾。我將把文件移到那裏。我是否需要在Index.html中更改某些內容？或者以.css的身份離開那裏工作？欣賞它 – VAAA 2014-09-12 17:07:06

是的，將CSS移動到'sass/etc /'之後，只需從樣板HTML中刪除它們的鏈接 - Sencha Cmd應該將它們編譯成一個巨大的CSS文件，並將該文件的鏈接放在HTML中。 – 2014-09-12 17:10:04

令人驚歎的:)讓我這樣做，並會讓你知道我的結果 – VAAA 2014-09-12 17:15:56

如何ExtJS的創建自定義SASS與煎茶CMD編譯

回答

相關問題