如何在ExtJS中创建自定义SASS以便使用Sencha CMD进行编译 [英] How to create custom SASS in ExtJS for compiling with Sencha CMD
问题描述
ExtJS 4.2.1 我的应用程序结构是使用 Sencha Cmd v4.0.1.45。
我在我的应用程序中使用一些自定义CSS来提供个性化风格，所以我的 XTemplate 项目，还使用 AwesomeFont 和 FamFam 为图标添加Sprites。 / p>
这是我的应用程序sencha cmd结构中的资源目录：
- App.css是一个自定义的CSS
- BoxSelect.css是其他自定义CSS
- chooser.css是其他自定义CSS
- famfamfam.css是将处理famfam.png图像精灵的CSS
- font.css是AwesomeFont附带的CSS。
开发模式下的应用程序（无构建）非常有用，但是当我尝试使用Sencha CMD进行构建，然后尝试打开
所以我最后是修改我的应用程序Index.html为了移动标签外的所有CSS引用。
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>应用程序< / title>
<！ - < x-compile> - >
<！ - < x-bootstrap> - >
< link rel =stylesheethref =bootstrap.css>
< script src =ext / ext-dev.js>< / script>
< script src =bootstrap.js>< / script>
<！ - < / x-bootstrap> - >
<！ - Ext计划程序 - >
< 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 =stylesheethref =resources / css / sch-all-neptune.css>
< link rel =stylesheethref =../ 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 =stylesheethref =resources / css / app.css>
< link rel =stylesheethref =resources / css / boxselect.css>
< link rel =stylesheethref =resources / css / fonts.css>
< link rel =stylesheethref =resources / css / famfamfam.css>
<！ - 视图图标选择器样式 - >
< link rel =stylesheethref =resources / css / chooser.css>
< / head>
< body>< / body>
< / html>
这样做很好，但我想创建一个SASS，所以我的自定义CSS的文件可以被细化
任何线索，为了创建我的自定义CSS的SASS，我必须遵循什么步骤，所以当做 sencha应用程序构建生产我的CSS被缩小了？
欣赏任何帮助。
在您的应用程序文件夹中，应该有 sass 文件夹。将您的CSS样式表移动到 sass / etc / 并重命名为 *。scss ，然后运行 sencha app build 。这应该是诀窍。
一个警告：我记得Cmd在某个时候有一个错误，它没有收到额外的SCSS文件。如果上述解决方案不适用于您，请将所有CSS文件手动连接到 sass / etc / all.scss 中，然后再工作。
I have my application built with ExtJS 4.2.1
My app structure was generated using Sencha Cmd v4.0.1.45.
Im using some custom CSS in my app to give personalized style so my XTemplate items and also Im using AwesomeFont and FamFam Sprites for icons.
This is my resources directory in my app sencha cmd structure:
- App.css is a custom CSS
- BoxSelect.css is other custom CSS
- chooser.css is other custom CSS
- famfamfam.css is the CSS that will handle the famfam.png image sprite
- font.css is the CSS that comes with AwesomeFont.
The application in development mode (without building) works great, but when I tried to build using Sencha CMD and then try to open the production Index.html I couldn't see any icon neither the styles applied from my custom CSS's files.
So what I ended up was to modify my app Index.html in order to move all my CSS references outside the tag.
<!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>
Doing this way worked fine but I would like to create a SASS so my custom CSS's files can be minified.
Any clue on what are the steps that I have to follow in order to create my SASS for my custom CSS's so when doing sencha app build production my CSS are minified?
Appreciate any help.
In your application folder, there should be sass folder. Move your CSS stylesheets to sass/etc/ and rename to *.scss, then run sencha app build. This should do the trick.
One caveat: I recall there was a bug in Cmd at some point, it didn't pick up extra SCSS files. If the above solution does not work for you, manually concatenate all CSS files into sass/etc/all.scss and it should work then.
这篇关于如何在ExtJS中创建自定义SASS以便使用Sencha CMD进行编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
