In scss I would usually add other scss files using the #import command.
With sencha cmd the SCSS file for my ExtJS app is generated.
Where and how do I add custom styles which then should be compiled into the app-all.css?
I don't want to create a custom theme (because I think that's an overkill)
I am using the default Classic theme, ExtJS 4.2 with Sencha Cmd 3.1.2
I see $include variables in the generated app-all.scss but there are no #imports for my custom scss files
generated appName-all.scss
...
$include-ext-window-messagebox: true;
$include-ext-window-window: true;
$include-appname-app-application: true;
$include-appname-controller-customer: true;
$include-appname-view-listings-index: true;
...
#import '../../../packages/ext-theme-classic/sass/var/window/MessageBox';
#import '../../../packages/ext-theme-classic/sass/var/window/Window';
...
#import '../../../packages/ext-theme-classic/sass/src/window/MessageBox';
#import '../../../packages/ext-theme-classic/sass/src/window/Window';
...
I've put my custom scss files into the existing appName/sass/src folder like this:
appname/view/listings/Index.scss
Unfortunately this seems to be ignored, when executing sencha app build..
How do I configure Sencha Cmd to include my custom scss files when generating appname-all.scss?
Oh wow.. just read my own question and had the idea that actually my folder structure is not really the same as extjs native structure (theme/sass/src vs sass/src/appName)
moving my Index.scss to appName/sass/src/view/listing/Index.scss solved the problem totally :)
new appName-all.scss after sencha app build
/* including package appName */
$branchenbuchAdmin-resource-path: 'images' !default;
$relative-image-path-for-uis: $appName-resource-path;
#import '../../../apps/appName/sass/src/view/listings/Index';
Loving it :)
Related
is there a way to use Bootstrap SASS variables in SASS module?
For example I have file index.module.scss inside my react/NextJS project. How can I use in that sass module variable from bootstrap? Something like this:
.hero{
color: $blue-200;
}
If i just add this import at start of file:
#import '~bootstrap/scss/bootstrap.scss';
I got this error (from NextJS):
Let me notice, that when I use this import in non-module sass file (lets say in file index.scss), then it works. But I need (want) to use SASS modules...
Any idea how to solve it?
Thanks!
Oh, I find a solution. I can add this three imports (instead that one bootstrap imports):
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
These three imports together works and doesn't cause error...
AngularJs correct viewI am upgrading angular1 project to angular4. Currently, I am working on views. But some views have problem they are not getting custom CSS of the theme. I have placed all the CSS files in the project and gave path in angular-cli-json. I have also tried after importing my css in style.scss but the view is same.
Angualar4 view not rendered correctly
If defining path in angular-cli.json is not working then you can import your files in /src/style.scss like
#import "./assets/css/your-file.css";
or
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
I try to customize the bulma default colors. I have installed node-sass and it appears to be working and in my root scss file ive written the script
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/css/bulma.css'
However this does not appear to be changing the primary color in my project or the primary font choice. Ive imported this file into my index.js file on react and bulma is definitely working just not accepting my customizations.
Update: here is the link to the bulma docs describing how to do this
http://bulma.io/documentation/overview/customize/ I tried it that way with no success as well
I think your .scss file looks good, though you don't need to include the .sass extension (it looks like you're writing .scss, not .sass, anyway so I'd remove it.)
The main thing is you need to include a build process that will transform the scss to css. See this part of the CRA docs.
Basically in your package.json scripts:
json
"build:css": "node-sass ./src/scss/main.scss ./build/main.css",
"build:css:watch": "npm run build:css -- -w",
My script above is putting the css in build folder and I'm using a link tag in index.html, but you could build and import as well.
Hey guys after taking the advice above I reconfigured the package json. Another side note I changed my source sass script to this
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/bulma.sass'
You have to point your scss or sass file to the bulma.sass not the bulma.css file since your wanting to create a new build of the bulma.css file other than the one that comes packaged with it
Cheers
Okay I have zurb installed on a drupal project and have it running with grunt, since it only has one main scss file [themename].scss and I'd like to have a multilingual website, I wondered how can I create a secondary .scss file for RTL pages, so it can override the main css file when viewing the RTL website.
I used to use foundation for building drupal themes. And here is how I handle rtl scss files.
Folder structure:
- scss/
|
- _settings.scss
- _settings-rtl.scss
- app.scss
- app-rtl.scss
- bower_components/
- config.rb
settings.scss; Standard foundation settings.scss file.
settings-rtl.scss; import settings.scss at the beginning of the file (to inherit all define variables) and then override any values you want.
#import "settings";
$text-direction: rtl;
$opposite-direction: right;
// any other settings you want to override.
app.scss;
#import "settings";
#import "../bower_components/foundation/scss/normalize";
#import "../bower_components/foundation/scss/foundation";
app-rtl.scss;
#import "settings-rtl";
#import "../bower_components/foundation/scss/normalize";
#import "../bower_components/foundation/scss/foundation";
Well I can't help you with the SCSS file but as for CSS you can just add another themename-rtl.css file manually to the CSS directory and start coding
In my Extjs app I have kept custom.css file in the resources folder of the root for testing and in the build- resources folder. And add the css path to two both index.html files(test and build). But whenever I make it to convert to build production, index.html file overwrites and custom.css file finds missing. Somewhat problematic it is. I know that this is because I add this file externally. But Is there any permanent solutions to fix this, without violating the Extjs app structure ??
You can add your custom styles via scss. There are several articles around the web about styling your ExtJS app.
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
http://www.rallydev.com/community/engineering/guide-custom-themes-extjs-4 [dead link]
If you only want to add your single custom css file - which i do not recommend - you can do things like that:
Include an existing CSS file in custom extjs theme
http://www.sencha.com/forum/showthread.php?270694-How-to-include-custom-components-CSS-in-build-CSS