Sencha Architect 3 does not use app.css - sencha-touch-2

I am trying to add custom font icons to my sencha architect project, and remove unnecessary theme classes but it seems that Sencha Architect does not use the app.scss at all (located in the resources/sass folder of my project). The changes that I made are neither applied in architect nor when I start the app.
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");
Just to mention, I did compile the scss file to css and it compiles just fine.
Could someone elaborate, please?
I am using:
Sencha Architect 3.0.2.1375
Cmd: 4.0.2.67
Framework: Sencha Touch
2.3.x
UPDATE:
It turns out that Architect does not use the app.scss file for theming reasons (see Phill's post). When I tried to insert the icon-font another problem did arise. The font-files could not be found. The reason is mentioned in the following post: http://www.sencha.com/forum/showthread.php?280895-How-to-correct-the-Font-theming-in-Architect3
The following code resolved the issue and I can happily use my new icon-font now:
$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");
To be explicit. I added a file to the theme in Architect (a scss resource) and added the aforementioned code.

Architect ignores this file as we give you full theme support. If you want to add custom scss click on the theme under resources. In the config panel you'll see a scss config; click the (+) icon to add a scss resource.
Now select it by either clicking the (->) button next to it or selecting it in the inspector under your theme. Switch to code view and paste in your scss.

Related

#import (reference) does not work with glyphicons

I have a Vue.js 3 project in which the server sends the glyphicons names. The application is Server-Side Rendering. Using #import (reference) the icons are displayed as a square instead of the actual icon. How does #import (reference) works in Less?
Another thing that worth be mentioned is the workflow: There are two Vue.Js project, A and B. When building the project A, the dist folder from project B is copied into project A (containing the styles from project B). Although the paths for #font-face are correct, the icons are still not displayed correctly. The server response is 200 so I guess the problem is not from the server.
I would say the problem might be related to #import (reference) since it works without (refernce) keyword.

Vue choosing theme at build time

I have an application, which gets deployed with two themes -- "normal" and accessibility -- which are implemented by having rules
#app.default {
#import './assets/scss/app.scss';
font-family: $font-family-base;
}
#app.accessibility {
#import './assets/scss/app-accessibility.scss';
}
and binding #app's style attribute. I have a need to deploy this same application in multiple places, but with a different "normal" theme. What are the strategies to be able to choose which theme to use during build time, while preserving ability to switch to (always same) accessibility theme at runtime? This compilation is done from an ant script, so I could in principle use eg app1.scss and app2.scss files for different deployments, and then before invoking vue build, copy chosen file to app.scss. This doesn't look like a clean solution to me though, are there better options?

Styling of Mirage 2 using themes from bootswatch.com

Based from the Readme files of Mirage 2, it says here:
If you want to base your theme on an existing Bootstrap theme (like the ones at bootswatch.com) you can do so by using the standard Bootstrap color scheme and replacing the import of Bootstrap in bootstrap_color_scheme/_main.scss:
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
with an import of just its _variables.sccs file (those variables need to be defined, because they are used in _dspace-bootstrap-tweaks.scss):
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";
Then import the the css file(s) of your Bootstrap theme of choice below it. Depending on the theme you may also need to update the twbs-font-path function right above that import statement.
What I did:
Ok, so I activated the mirage2_bootstrap_color_scheme maven profile. Copied the bootstrap_color_scheme/_main.scss from dspace-xmlui-mirage2/src/main/webapp/styles/ into dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles.
I changed the text in _main.scss that says #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap"; into #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";, and then I copied the bootstrap.min.css that I downloaded from bootswatch.com and put it in the same directory with _main.scss and then I referenced it in _main.scss with an #import "bootstrap.min.css"; statement.
I'm having this error when running mvn package:
error styles/main.scss (Line 12: File to import not found or unreadable: variables.`
I also tried putting the _variables.scss under the bootstrap_color_scheme directory and used the #import "variables"; but I got the same not found or unreadable error.
Can someone guide me on how to correctly use the themes from bootswatch.com to apply to Mirage 2? An example and a simple walk through of using a sample theme from bootswatch.com would be great.
Thanks in advance.
I deleted my other answer because I was mistaken.
Here is an example of a working bootswatch theme:
https://github.com/antoine-atmire/DSpace/tree/mirage2%2Bbootswatch/dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles
The /styles/bootstrap_color_scheme/_main.scss file gets copied to /styles/main.scss during the build process, so the #import statements should be relative to /styles/main.scss.
Bootstrap-sass has updated its paths, and the Mirage 2 docs are not yet updated.
_variables.scss is now stored here: "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss"
Depending on which version you're using, it can even be in another place.
A general recommendation is to look at the vendor folder in:
dspace/modules/xmlui/target/xmlui-*/themes/Mirage2/vendor/
Look for the path of the variables file there and use that path.

Easiest way to change when Bootstrap navbar collapses (using bootstrap gem)

I've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.
I've edited #navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.
What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using #import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?
Did you read some info about configuration this gem?
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
Need to configure a variable or two? Simply define the value of the
variable you want to change before importing Bootstrap. Sass will
respect your existing definition rather than overwriting it with the
Bootstrap defaults.
$navbarCollapseWidth: 769px;
#import "bootstrap";
Or that is not what you need?

CSS Bundling and Internet Explorer's Limit

When I add jquery ui to the bundle I end up with:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"
Internet explorer has a limit of 31 style sheets it will load, of which jquery has taken 12. Add in yui reset, base and fonts I'm at 15 style sheets already, with none of the sites styles or plugin style sheets loaded in.
Obviously, everything works fine when it is bundled as there is only one stylesheet generated. My first instinct was to use the ones that use #Import but that causes bundling to fall over or not minify.
What is the best workaround for this, other than fewer style sheets?
My current solution is a #if DEBUG construct but is there a better way?
#if DEBUG
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.all.css"));
#else
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
#endif
If you really need all the themes simply include the jquery.ui.all.css in DEBUG and RELEASE modes.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.all.css"));
This way in DEBUG mode you get a single CSS file and in RELEASE mode you get a single, compressed CSS file served with cache headers.