How and where to add angular material theme?
//Import a pre-built theme
#import ‘~#angular/material/prebuilt-themes/deeppurple-amber.css’;
add #import ‘~#angular/material/prebuilt-themes/deeppurple-amber.css’; in style.css under src folder
refer https://material.angular.io/guide/theming
Related
I'd like to incorporate fontawesome icons on my Foundation Sass project and I am having an issue. I have done everything as suggested by fontawesome team and yet it is not working...
I bower installed the fontawesome
I have added the scss file to the config.yml
I have changed the path name to fonts folder
https://postimg.org/gallery/1h018wsm8/
What I get in my browser is weird symbols and for some reason it is not working. Can you please tell me what I am missing? Thanks...
You have to #import the scss file from the bower_components folder in your Foundation _settings.scss or app.scss file.
The reference you have in config.yml is the PATH to the plugin/module not the import of the actual scss file. What this does is copy the *.scss files to the dist directory, but they still require referencing from your site/app code.
e.g. I use app.scss to import the various scss files and so my #import command for Font Awesome is:
#import '../../../bower_components/font-awesome/scss/font-awesome';
Note: this is to the specific file font-awesome.scss (where you set the font files path), not the whole directory so you also need to make sure you import the font files too which can be done via gulpfile.babel.js + config.yml.
Based on this tutorial I started an ionic2 project from a tutorial template http://ionicframework.com/docs/v2/getting-started/tutorial/adding-pages/.
After successfully adding a new mypage.html and mypage.ts page under /app/pages/mypage I also wanted to align my objects to center on my page, so I created a mypage.scss file with the content:
.centered {
text-align: center;
}
Also note that I added the class centered on the mypage.html <ion-content> tag.
What I found that when I serve my page the gulp won't compile and add my own styles to /www/build/css files. Am I missing something or is it buggy?
You need to include it in your app.core.css file like this:
#import "../pages/mypage/mypage";
The first mypage is the name of the folder, and the second one is the name of the file (the extension is not needed)
Okay so I found that you have to also import your file to /app/theme/app.core.scss. Which I don't really think is a good solution from ionic team (even worse I did not see this mentioned anywhere).
I think you could edit the gulpfile to source all the scss files under app directory so you don't have to import every single file to app.core.scss
TL;DR
How to import scss files from ember addon to consumers app(should import scss files and not processed css file, scss should be processed in consumer's app instead).
Details:
I am developing an addon and I am using sass for design, I want to let my users configure css properties from addon. For this I want to import scss files directly into the consumers app(I don't want them to use already compiled to css file that would go to vendor.css file) and override some of the variable's value.
Here is the plan on how it should work:
I have a configuration scss file, which has several variables I want to be configurable, user can override these variables by first including their own configuration scss file and our scss file below that(more details on how scss variables can be made overridable and are overriden).
The file structure for addon/styles is as follows:
I have imported all css files inside addon.scss as follows:
#import 'config';
#import 'helpers';
#import 'normalize';
#import 'base';
#import 'utilities';
#import 'modules';
#import 'datetime-picker';
#import 'fontawesome';
#import 'animation';
#import 'states';
The values I want my user to override are in _config.scss. Part of my _config.scss file looks like this:
$header-font: $font-sans !default;
$header-font-size: $small-font-size !default;
$header-font-type: normal !default;
I want user to provide their own value for variables like $header-font,$header-font-size and include before scss from my addon is included.
Ember version: 1.13.3
I have to import some stylesheets residing inside node_modules (bootstrap.css from node_modules, etc).
I tried by
adding styleUrls inside #Page,
putting the styles in the .scss file inside the page component folder,
and finally putting the styles inside the template file itself by creating new style tag... all with no luck, i.e the required styles are not getting applied on tags with appropriate classes.
How to do this ?
PN: I had imported the page scss for my components in app.core.scs.
Anyways, I think putting bootstrap.min.css inside page scss is not a
good way
Adding the above import doesn't seem to work in the latest version of Ionic2 (ionic -version = 2.1.4) that I installed on 10/25/16. There is no longer an app.core.scss file in newly created projects. But rather just variables.scss in src/app/theme.
There is a file app.scss in src/app that says it's for global SASS and importing other files, but adding an import for another page does not seem to make a difference.
I have a page /src/app/pages/about, in which I have about.ts that has styleUrls: ['about.scss']. The file about.scss is in the same directory. Putting #import "../pages/about/about"; at the bottom of that file makes no difference.
UPDATE:
I have finally got it to work with this in about.ts:
styleUrls: ['/pages/about/about.scss']
I'm not sure if this is the best way yet, but it works for now.
#import "../pages/yourpage/yourpage"
Add this line in app/themes/app.core.scss and rebuild. Of course change yourpage expression.
I've installed Zurb Foundation into my Yeoman project using yeoman install foundation then included it in my project by updating my Gruntfile.js using require: 'zurb-foundation'
The problem now arises when I try to edit my app/styles/main.scss file. I am unable to override the default Zurb foundation SASS variables.
I've tried to edit the _settings.scss file within app/components and also under components in the main directory - but to no avail.
Has anyone had any luck or have a solution to this dilemma?
I found the answer myself.
The key is to put an !important declaration after your override (basic CSS doh!), and place this override in your own main.scss or equivalent file:
$mainColour: red!important
and don't forget to add the require statement in your Gruntfile.js:
compass: {
dist: {
options: {
require: 'zurb-foundation',// ADD THIS LINE
css_dir: 'temp/styles',
sass_dir: 'app/styles',
images_dir: 'app/images',
javascripts_dir: 'temp/scripts',
force: true
}
}
},
Have you tried using yeoman-foundation-generator from github? https://github.com/pchen/yeoman-foundation-generator
It is like using standalone SASS and Foundation. You have to put the folder from the git repo inside your NPM installation.