I am trying to import Font Awesome and Google Fonts into my Ember app but they aren't working. None of the styles are being applied.
I am using ember-cli-sass. Am I not able to import a stylesheet from a CDN? Does it not compile .css files? I tried looking for a .scss file for Font Awesome on a CDN but I couldn't find any, and I don't think Google offers .scss files at all.
app.js
import 'fonts.scss'
fonts.scss
#import '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
#import '//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300';
When I add <i class="fa fa-user"></i> to my template, none of the Font Awesome styles are applied. Why aren't the stylesheets being imported?
There are two main ways to do this. If you don't mind fetching it from the internet, you can add them as links in your <head> tag in index.html.
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300" rel="stylesheet">
Or you can download the files and include them in your scss build. This gives you more freedom to customize them. You might want to do this to minimize the number of API calls your app requires in order to load, as you've heard that will make your app load faster. But consider that if the fonts you are loading are popular (and these two are) then your user may already have them cached, making them blazingly fast.
If you want to download the files into your build here is what you do. Keep in mind that CSS is valid SCSS, so if you can get a CSS file you can always just rename it .scss and include it in your build. But you can't import a file from the internet in your scss. Your scss gets parsed and compiled into CSS before your app even gets served. The files need to be available from your project folders.
Font Awesome
For FontAwesome 4.7 you can get the sass files and include it in your project pretty easily. Go to http://fontawesome.io/ , click the "Download" button, download the files. You need two folders, the "scss" folder and the "fonts" folder. Add those two folders to your project. Open the scss/_variables.scss file and change the #fa-font-path to be the path to the font directory. Include the font-awesome.scss file in your scss. You can also find the instructions at http://fontawesome.io/get-started/
If you want to start to get fancy you can then edit the files to only include the icons you want. There are several ways to do this, but I won't get into that here. It's licensed under the MIT license, so you should be able to do this legally.
Google Fonts
Open a browser and paste http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300 into the url. You will actually get the css file. Copy and paste into a .scss file and include it in your build. With Google Fonts each font has its own license. Open Sans is covered by the Apache 2.0 license, so you can do this.
There is no support in SASS for importing a CSS file
If you are using Ember, the best way would be to either download the CSS into the vendors folder and added to ember-cli-build.js.
Alternatively, if you want to use the CDN, you can add the CSS to the index.html in Ember.
Related
So I'm working on a web project and I started with an HTML/CSS template created by someone else. It appears to use bootstrap which I don't know much about.
Upon using chrome developer tools I noticed that some of the css styles being applied were coming from scss files which I can not find on my system. I'm wondering where do these files exist?
The screenshots are from
Chrome dev tools that tells me the path to the scss file that is applying styles
That same path on my system where the scss folder was stated to be does not appear to exist. Notice that I'm in the "vendor" folder but there is no scss folder as dev tools shows there to be.
Can someone explain to me where the browser is loading these scss files from? I've tried having Windows display hidden files and folders and that doesn't make a difference. Thanks!
Path to scss file via Chrome Dev Tools:
That same path on my file system
It happened because of scss sourcemap. It generated when compile scss file to CSS, for easy debugging.
I assume you are using development version of bootstrap. If you using production version it's not happen.
You can find more information about this here
There may be files with .map extension (called as the source map in scss world) in your project path. These .map files refer to the path of the .scss files that were used during development to create .css files. So, even though there are no physical .scss files present in your context path; and your html file refers to the compiled .css file, Chrome debugger would still show the original .scss file from which the .css got compiled. If you require the Chrome debugger to show the actual .css file name, then you could delete the .map file temporarily. This suggestion is considering you would like to see the .css file name instead of the non-existent .scss files. You could also check this link to understand more about working with .scss files in Chrome debugger : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
I'm using fourseven:scss to compile scss files. This seems to work fine if I include my .scss files under the client directory. However I'd like to leave them near my components either in /imports/ui/stylesheets/ or else right next to the components in /imports/ui/components/. It's just that nothing seems to happen when I leave them there.
The fourseven documentation says that the packages searches all directories and complies .css files from any .scss files it finds. These are then packaged up and sent down to the browser. I can see a resource "merged-stylesheets-prefixed.css" when I put my .scss in the client directory. I just can't see anything when I put it under imports.
How do I control this behaviour?
Try creating a main.scss file in the client folder and from there import all your other files, like e.g.:
#import "{}/imports/ui/components/_ComponentABC.scss";
Does it work?
Created a PHP project in Sublime Text 3 that holds PHP, CSS, JS, HTML, and some other files and folders. Other files may be .md, .txt, .ico, images and fonts (.woff, .ttf, ...).
Actually project is WordPress, but the solution should be for all PHP based projects, and specifically I am interested only to check specific folders inside of project (liek theme and plugin files). WordPress core is no interest for me to check.
I would like to detect Files with extensions (.php, .css, .js) that are unused. Is there a smart solution do detect these?
For instance CSS file is not used if no other files references it. The reference may came from another CSS file or from some PHP file, or even JS file.
I am not searching for a perfect solution, but for something that is close to detect these or even for an idea how I may think about these.
In WordPress (PHP) there are require and include instructions, and also wp_enqueue_script/styles that represent the mechanism how to reference files for instance.
So we could create a list of all PHP, CSS, JS files, and then based on file names search for these in the content of all other files. This would be a good start.
in my project I have multiple sites that share common SASS files. Some of them implement their own, custom rules (in _custom.scss); others don't. So for some of the sites there is no _custom.scss file (but it is imported in common SASS anyway). To avoid putting empty _custom.scss files in each local SASS folder I created an extension in compass (like it was suggested here How to import scss file in compass only if it exists?).
But there is problem: the compiled CSS goes into css/extension_name/stylesheets folder. I want it to go into css/ folder.
I have my css_dir set to "css" but still the compiled CSS goes into css/extension_name/stylesheets. I could move the file each time but I don't think it's a good practice.
Can somebody suggest some solutions? Any help would be appreciated.
While building large applications with meteor, we do face the regular problem of editing the stylesheets files. Once a file is edited, the whole application reloads which takes time each time a little change is made. A large project implicitly implies complex css files. For this reason I chosen to use the sass in order to structure them and be more efficient in the development processing. What I'm looking for is a workflow where I can change the .scss files in an editor and watch the result in real time in my meteor app.
Here is what you need (it looks fastidious but do not be afraid, it worth it):
Setup your project to externalise .css files
Meteor compiles all the .css files into one monolithic one, most of the css editors are not expecting this behaviour. For the development phase, I do recommend to use the traditional approach of including the stylesheet to the html page itself. to do so:
Create a public folder in the root of your meteor project: meteorProject/public
Add a css file into this folder: meteorProject/public/style.css
Import the stylesheet in your main html code <link rel="stylesheet" type="text/css" href="/style.css" />
What you did ? You created a public repository accessible through the path localhost:3000/ then you added the stylesheet style.css to this repository, that one became available through the relative path /style.css. By using this technique, meteor will not compile neither include by itself the stylesheet to your project, you just load it manually in the regular way using the link tag. Now it is time to configure an editor.
Now that the styles are imported the way they were 10 year ago, you can use compatible tools which will override the style to allow live editing. A simple one but only for css is the well known Espresso (formerly CSSEdit), open the page and override the styles… but that one is currently not supporting .scss files.
Editing .scss files in realtime with meteor:
To achieve this, you will need to use Sublime Text 2 or 3 as the editor, you can get it here: http://www.sublimetext.com/3 it is not free but there is no feature nor time restriction. So if you continue using it, just buy it to support the developers team.
You will need the awesome tool to allow the live edition which is takana, get it here: https://github.com/mechio/takana
That takana is freaking awesome! the concept is the following: Once installed and ran it will create a server interacting with the sublimetext editor, then you are requested to add a js snippet to your code so that the browser will get connected with the takana server and reload the .css or .scss files in realtime without having to reboot meteor.
To setup the meteor project with takana just do the following:
open the terminal
sudo npm install -g takana (enter your password if requested)
start takana in another terminal by providing it the absolute path of the meteorProject/public folder created above is might look something like: takana /Users/aUser/meteorProject/public
Add to your main html page the js snippet <script type="text/javascript" src="http://localhost:48626/takana.js"></script>
You are all set, now to use it
Start your meteor project in a second terminal. command meteor from the right path…
Open any browser to your meteor page i.e. probably http://localhost:3000
Open sublimetext, try editing your style.css file, the css changes are automatically displayed on the browser page without saving anything.
This is also working with .scss file. Just rename the style.css to style.css.scss and edit it within sublime text. Here the magic happen, you are editing a scss file with live result on a meteor application without having to reload anything.
Once you are satisfied with the result you can either compile the .scss to a .css file and add it the regular way to the project, or use the meteor .scss package which will do this for you at each restart. Note: Don't forget to remove the js and style snippet one to your code once in production.
Last but not least: you can open the project in several browsers and see them be refreshed in live while you edit the file in SublimeText, also it worked fine with Safari, FF but for some reasons I had to use "Google Chrome Canary" instead of "Chrome". Please comment if you made it work on other browsers such as IE, Opera or even if it worked with the regular "Chrome" on your computer.