【问题标题】:Sencha Architect 3 does not use app.cssSencha Architect 3 不使用 app.css
【发布时间】:2014-02-06 15:08:52
【问题描述】:

我正在尝试将自定义字体图标添加到我的 sencha 架构师项目中,并删除不必要的主题类,但似乎 Sencha Architect 根本不使用 app.scss(位于我的项目的资源/sass 文件夹中)。我所做的更改既没有应用在架构师中,也没有在我启动应用程序时应用。

app.scss

$include-pictos-font: 
false; $include-default-icons: false;

@import 'sencha-touch/default';   
@import'sencha-touch/default/src/Class';

@include icon-font('CustomFont', inline-font-files(  
'customFont/customFont.woff', woff,   'customFont/customFont.ttf',
truetype,   'customFont/customFont.svg', svg ));

@include icon("map"  , "e600", "CustomFont"); @include
icon("check_filled", "e602", "CustomFont");

顺便提一下,我确实将 scss 文件编译为 css,它编译得很好。

谁能详细说明一下?

我正在使用:

  • 煎茶架构师 3.0.2.1375
  • 命令:4.0.2.67
  • 框架:煎茶触控 2.3.x

更新:

事实证明,Architect 不使用 app.scss 文件是出于主题化的原因(请参阅 Phill 的帖子)。当我尝试插入图标字体时,确实出现了另一个问题。找不到字体文件。原因在以下帖子中提到:http://www.sencha.com/forum/showthread.php?280895-How-to-correct-the-Font-theming-in-Architect3

以下代码解决了这个问题,我现在可以愉快地使用我的新图标字体了:

$font-files:
         url('../resources/sass/stylesheets/fonts/bla/bla.woff') format("woff"), 
         url('../resources/sass/stylesheets/fonts/bla/bla.ttf') format("truetype"), 
         url('../resources/sass/stylesheets/fonts/bla/bla.svg') format("svg");

@include icon-font('IcoMoon', $font-files); 

@include icon("map"  , "\e600", "IcoMoon"); 
@include icon("check_filled", "\e602", "IcoMoon");

要明确。我在 Architect(一个 scss 资源)的主题中添加了一个文件,并添加了上述代码。

【问题讨论】:

    标签: sencha-touch-2 sass sencha-architect icon-fonts


    【解决方案1】:

    Architect 会忽略此文件,因为我们会为您提供完整的主题支持。如果要添加自定义 scss,请单击资源下的主题。在配置面板中,您将看到一个 scss 配置;单击 (+) 图标以添加 scss 资源。

    现在通过单击它旁边的 (->) 按钮或在主题下的检查器中选择它来选择它。切换到代码视图并粘贴到您的 scss 中。

    【讨论】:

    • 感谢您与我分享这个。它帮助我解决了我的问题。
    • 是否也可以删除“自动” sencha/default/all 导入,而是使用此处描述的技术:sencha.com/blog/4-tricks-for-smaller-css-in-touch-22
    • 似乎可以通过编辑 scss 文件来实现。尽管我们应该这样做,但我们不会以自动化的方式执行此操作。
    • 实现这种行为会很有帮助。我实现它的方法是从主题的(scss 视图)复制所有调整。还要复制主题中所有(可选)额外的 scss 文件。然后将复制的代码粘贴到 app.scss 文件中并生成 app.css 文件。请注意,架构师还在 app.json 文件中包含对主题的引用。我还必须手动将该行更改为生成的 app.css。
    猜你喜欢
    • 2017-05-21
    • 1970-01-01
    • 1970-01-01
    • 2014-12-07
    • 2012-10-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-26
    相关资源
    最近更新 更多