I'm trying to use the angular2-busy library in an angular project created with the CLI, but am having an issue importing the stylesheet:
<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">
The browser is telling me that it cannot find the file, even with the correct path. I also checked that the file exists, and it does. When I take out the rel="stylesheet" I don't get the error, but then the animations don't work.
Here is the package I am trying to use, if anyone is curious:
https://www.npmjs.com/package/angular2-busy
Angular CLI have it's own way to initialize your global css/js.
They are located in .angular-cli.json configuration
Locate "styles": and add your css there
Example :
"styles": [
"../node_modules/angular2-busy/build/style/busy.css",
"styles.css"
],
Hope that helps.
Basically there are three different ways to do that :-
By adding it to the "styles" array in angular-cli.json file as is shown by #penleychan in his answer.
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
You can directly import the css file into styles.css file (or any other css file) that is included in "styles" array in angular-cli.json file by adding the #import statement at the top of that file.
#import "~bootstrap/dist/css/bootstrap.min.css";
Include the css file in index.html page by adding a link element.
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
You can find a more elaborated explanation and a few more alternatives at this link
How to Use Angular with Linked Cascading Style Sheets (CSS)
Always use LINKED CSSS rather than the compiled and embedded JavaScript memory version of CSS Google Angular uses. Why? Linked <link> external CSS is superior in every way to embedded CSS, mainly because linked CSS is cached across thousands of page views, visits, and users online, saving you huge bandwidth values with increased CSS rendering speed in the browser, while implementing simpler, faster CSS management, overall.
HOW TO FIX ANGULAR FOR LINKED CSS
In angular.json delete all the references to CSS files under "styles". It should look like this now:
"styles": [],
Move your CSS files to the"src" folder inside your project, then add links <link> to your external CSS files inside index.html. Add in your link paths to your CSS file starting at the "src" folder and including the "styles" folder or any folder system you desire (see below). You can store your css wherever you want in your project now as long as those folders of files are under your "src" root folder. My physical CSS files in my project for the path below now sit under "src/styles". So the link path should just be my "styles" folder plus the file name:
<link href="styles/mystyles.css" rel="stylesheet" />
Any CSS files for bootstrap, font-awesome, etc. that you want in your project have to be manually copied from your "node_modules" folder in your project into a folder under your "src" folder, just like in the location used for the CSS file above in #2. Or, you can reference them from some fully qualified url online. If you want to create a link to them as above in "index.html", or import them into the html file directly (example below), that will also work. If you were importing them before from the "node_modules" folder that will not work as the Angular CLI or webpack resolved those paths by compiling your CSS imports into JavaScript. After you move those CSS files and link or import them from the src folder, they will not be compiled into Angular JavaScript now. When using #import, be sure to drop your bootstrap and font-awesome CSS files in the same "src/styles" folder as your main style sheet and import them into that stylesheet like this:
<style type="text/css">
#import "bootstrap.min.css";
#import "font-awesome.min.css";
</style>
In the same angular.json file above, under the "assets" JSON setting, add a reference to the location of your CSS files in #2 and #3 so the builder can copy them into your dist folder. Any CSS files linked or imported from that folder will get moved by the "dist" folder system when Angular is compiled. Note the new styles path at the bottom. If you have CSS in other folders you can add them here as well. This tells the builder to create the CSS directories in the "dist" folder Angular uses and copy all the CSS files inside them, so when you build for production your index.html links point to the right CSS files on the server:
"assets": [
"src/favicon.ico",
"src/assets",
"src/api",
"src/styles"
],
You now have a powerful set of link elements to all your CSS in the head of your index.html file and can edit them in the Angular project like you normally do, knowing they will work in both the Angular development test server and in your dist production copy. Your website will also benefit from browser caching of CSS one time in memory and permanent file caches.
It took me a day to dig through documentation and testing to figure out what should have been a natural part of any simple website API with linked CSS. I'm sorry Google Angular made this so convoluted. But this change works great!
This simply removes your CSS from the compile and build angular system that pushes all your CSS into a JavaScript file, which simply embedded your CSS into an inline style sheet block in the memory of your browser and head of your HTML page. Using your own linked CSS html tags is far superior and allows better caching and control of CSS cascade rules.
Good Luck!
Try
<link rel="stylesheet" href="node_modules/angular2-busy/build/style/busy.css" >
You are missing the self closing / at the end of your code. It's possible the browser is not fixing this for you.
<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css" />
Also removing rel="stylesheet" would definitely not fix the problem since the browser needs to know exactly what kind reference you are referring to.
If fixing the closing tag does not work then your path is wrong. You can also try adding a ../ to the beginning of your path. This will make it relative to the folder the site is in.
<link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />
Related
I have a fairly simple webpack project - built using the Webpack guide. See https://github.com/timburgess/webpack-postcss-tailwind
There is a style.css in the src directory but there is no .css being added to the /dist directory on build.
Reading further, any css should be added as an inline style and that's not occuring.
Resolved with https://github.com/webpack-contrib/mini-css-extract-plugin per Richards answer.
Webpack will bundle the css files referenced via import statements in your source javascript files into the output javascript file (bundle.js). You'll see the classes being applied to the webapp at runtime via inline <style> tags applied dynamically to the html.
Many developers do not think this behaviour appropriate and will use a special plugin to get webpack to produce seperate bundled .css files that you then reference in your html using the traditional (and caching friendly) <link rel="stylesheet" type="text/css" href="bundle.css"> tag. See:
https://github.com/webpack-contrib/mini-css-extract-plugin
My bootstrap css file is located at
C:\Users\SCEA\Downloads\bootstrap-3.3.7\css
and for linking this to my php file I have given absolute path as:
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7\css" rel="stylesheet">
but the effect of css is not visible.Is my css file not getting linked?
You might have a typo before css. The backslash before it might need to be a period.
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7.css" rel="stylesheet">
If are running server in your local computer I suggest moving this file within the server document root.
Your comment:
css is a folder inside bootstrap-3.3.7
Probably in the CSS folder are the actual css files.
You need to refer to the actual CSS files and not to the folder itself.
Here is a quickfix using CDN:
Put these links in and it works guaranteed
Where should I put my css file if I have only one file (style.css) ?
I use sass for my project and I convert all my sass files to only one css file.
But I don't know where I have to put this file.. because normally I would create a static folder for each app but I think that makes no sense if I have only one file...
You just need to put the CSS file somewhere and tell HTML were to find using the link tag.
For example, if the file is in the folder "style" the tag will be.
<link rel="stylesheet" href="/style/file.css" />
Usually the main css style fail was in the root folder or in a style folder.
I am building a test app to learn how to organize multiple files with METEOR.
I have a head.html and inside I have the following link to my custom CSS:
<!-- Custom CSS -->
<link type="text/css" rel="stylesheet" href="/stylesheets/globals/style.css"/>
Very normal, Yet I have trouble to make that working.
Here is my app directory:
-app folder
---client
-----head.html
-----index.html
-----stylesheets
-------globals
---------style.css
I know it seems to be a very basic question but I can not figure it out.
Basically you have 2 ways of inserting CSS in a Meteor project :
Using the Meteor build tool to automatically concatenate and minify all your CSS files living in the client/ directory : in this case you don't need to import your stylesheets using a link tag in the head. This is perfect for vital CSS files that your app should load when started.
Example : put your CSS file under client/stylesheets/globals/style.css and that's it, no need to import it, it's automatically injected in your project by Meteor.
Using the classic way of importing stylesheets in a web application : you can put your CSS files inside the public/ directory and they will be served by your app server. In this case the Meteor build process will be skipped so files won't be concatenated together nor minified. Use this method when you want to lazy load big CSS files only needed in a subpart of your app (for example admin section styling).
Example : put your minified CSS file under public/stylesheets/admin/style.css, and use something like iron:router to load the CSS file when hitting the admin route.
Router.route("/admin", {
// onRun hooks executed only once
onRun: function(){
// create a link taf holding a reference to our publicly served CSS file
var link=$("<link>",{
rel: "stylesheet",
href: "/stylesheets/admin/style.css"
});
// append to the head tag
$("head").append(link);
}
});
I created an Angular project using Yeoman's generator, and now I am trying to add the Font Awesome to the project. I installed it using Bower using
bower install fontawesome --save
then it automatically added to my app/index.html the following code:
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
But I didn't want to use it as CSS, but as a SCSS import (to be able to change the URL of font files). So I deleted the above code from the HTML page and added the proper code into app/styles/main.scss:
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
$fa-font-path: "../bower_components/fontawesome/fonts/"; // <==== here
// bower:scss
#import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
#import "fontawesome/scss/font-awesome.scss"; // <==== and here
// endbower
Then I run grunt build, but something (Grunt?) edited my files back to the original ones. The index.html got the <link> again and mine main.scss was kept only with the Bootstrap import.
Ok, we are almost there.
So I looked at the Bootstrap's bower.json and compared to the Font Awesome's bower.json and I saw the following difference:
// Bootstrap
"main": [
"assets/stylesheets/_bootstrap.scss", // it's SCSS
...
],
// Font Awesome
"main": [
"./css/font-awesome.css", // it's CSS
...
],
Then I found a way to properly (not sure) override the Font Awesome's bower configuration using my app's bower.json, and added the following code into it
"overrides": {
"fontawesome": {
"main": [
"./scss/font-awesome.scss", // now it's SCSS
"./fonts/*"
]
}
}
Question: Is this the correct way to use Font Awesome as a SCSS import and avoid Grunt of changing my files when building the project? By overriding its default "main" property?
Judging by your question I think you may be new to the web frontend build process. Unfortunately it can be a headache at times.
First off, note that SCSS != CSS and browsers do not know how to use SCSS. Including <link rel="stylesheet" href="main.scss"> in your HTML <head> tag will not work. We can enjoy the various perks of SCSS (e.g. variables, imports, etc.) during development, but to use these styles in the browser we must transpile SCSS into CSS (which the browser recognises).
To make developer's lives easier, it is common for seed projects (such as the one you are using) to include some kind of automated build process which includes transpiling SCSS into CSS. The build process is typically executed via a task runner, such as Grunt or Gulp. These seed projects/templates also typically include a task to inject your project's dependencies (as declared in your bower.json file) into your index.html automatically. A tool called wiredep is used to read through your bower.json files to determine these dependencies, in particularly, it will look for the 'main' attribute to determine which files a particular package requires. It will then inject the appropriate <script/> and <link> tags.
To explain this further, when you execute bower -install font-aweseome --save a few things happen:
The package is downloaded and added to your project (usually to bower_components/).
An entry is added to your bower.json file adding the package to your project's dependencies.
Each package includes its own bower.json file which describes its various properties, the most important of which (after name) is main. You can see the font-awesome bower.json file here. As you can see, it's main attribute references several files. These are the files that wiredep uses to determine which <script/> and <link> tags to inject into your index.html.
By specifying an override in your project's bower.json like this:
"overrides": {
"fontawesome": {
"main": [
"./scss/font-awesome.scss", // now it's SCSS
"./fonts/*"
]
}
}
You are specifying to wiredep that ./scss/font-awesome.scss and ./fonts/* are the files required by your project, and to ignore those listed in the font-awesome bower.json file.
Regarding SCSS: take a look at the Sass guide, in particular the section on imports. The Sass #import lets you split your styles across several smaller SCSS files (partials) that, upon transpilation, are combined and included into a single (optionally minified) CSS file. This includes any third party SCSS files that you import into your main.scss. For example, if you imported font-awesome.scss into your main.scss file, then transpiled it into CSS, the resulting CSS file would include all styles contained within font-awesome.scss.
To include and customize a third party SCSS file, what I do is:
Specify an import in my own custom main.scss file.
Make any customizations to variables I want.
Transpile main.scss into CSS.
Include a <link> tag to the transpiled CSS file in my index.html file.