All geek questions in one place

How to create custom SASS in ExtJS for compilation using Sencha CMD

I have my application built using ExtJS 4.2.1

My application structure was generated using Sencha Cmd v4.0.1.45.

I use some kind of custom CSS in my application to create a personalized style to my elements XTemplateas well as Im using AwesomeFontand FamFamsprites for the icons.

This is my resource directory in my scm application sencha structure:

enter image description here

  • App.css is Custom CSS
  • BoxSelect.css is another custom CSS
  • chooser.css is another custom CSS
  • famfamfam.css is the CSS that will handle the sprite famfam.png
  • font.css is the CSS that comes with AwesomeFont.

( ) , Sencha CMD, production 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 .

, , , SASS CSS, sencha app build production CSS ?

.

+1
1

sass. CSS sass/etc/ *.scss, sencha app build. .

: , - Cmd, SCSS. , CSS sass/etc/all.scss, .

+1

Source: https://habr.com/ru/post/1527551/

More articles:


All Articles