I am creating a simple angular project in which I am using css of font-awesome.
In my index.html I added following line:
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
and before this i executed: bower install font-awesome --save
Now when i execute grunt serve the above line for importing css is automatically removed. How can I resolve this issue?
If you are using grunt-wiredep, which automatically injects the bower components into your index file then anything between
<!-- bower:css -->
<!-- endbower -->
and
<!-- bower:js -->
<!-- endbower -->
will be overwritten with each command.
Try putting your <link> tag out side of this.
Finally after lots of hit and trails got the solution. In bower.json under overrides we have to write following block of code, after that grunt serve won't remove that link from index.html
"font-awesome" : {
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss",
"css/font-awesome.css"
]
}
Related
I have a ASP Core project and have added a bundleconfig.json to the project base. Within the bundleconfig.json I have added the following code for bootstrap.css
{
"outputFileName": "wwwroot/css/bundles/bootstrap.css",
"inputFiles": [
"wwwroot/css/Plugins/bootstrap/bootstrap.css"
]
},
When I build the project I can see the bootstrap.css file in the specified path within the project. I have placed the bootstrap.css file on my _Layout.cshtml view within the <head> tag.
<environment include="Development,Staging,Production">
<style src="/css/bundles/bootstrap.css" type="text/css"></style>
</environment>
When I load up my site none of the bootstrap css styling being applied. If I view the source using chrome dev tools I can see
<style src="/css/bundles/bootstrap.css" type="text/css"></style>
and when I click on it I can see all the correct css code is present in the file.
I have also installed the BundlerMinifier.Core nuget package and the Bundler & Minifier extension as I seen others suggest on other posts.
The syntax should be <link href="/css/bundles/bootstrap.css" rel="stylesheet">
I want to using in my service webjars bootstrap.
I added dependency
compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-alpha.6-1'
I register source
registry
.addResourceHandler("/webjars/**")
.addResourceLocations("/webjars/");
I using bootstrap css in thymeleaf
<link rel="stylesheet" th:href="#{webjars/bootstrap/4.0.0-alpha.6-1/css/bootstrap.min.css}">
And bootstrap does not work at all. No items. How this service did not see the bootstrap css file? In the project I use, for example, Spring Security. Could it have any effect? And is it worth the trouble of fixing it? What is the speed between a webjars file and such a plain css file in the 'resource' folder?
To add Bootstrap as webjar pls add the following to build.gradle:
dependencies {
...
compile 'org.webjars:bootstrap:4.1.3'
}
And attach it to html template:
<body>
<script src="/webjars/bootstrap/4.1.3/js"></script>
...
</body>
You can add bootstrap.min.css file like below:
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
A github example is given in this link: https://github.com/springframeworkguru/springbootwebapp
Full tutorial is here: https://springframework.guru/spring-boot-web-application-part-2-using-thymeleaf/
With node and browserify it's easy to manage js dependencies by just buttoning it all up into a bundle.js file and including that in the parent html.
What I'm wondering is how do you guys manage libs like bootstrap?
They download just fine to node_modules but how do you get them into your html files or asset folder?
Do you just reference them straight from node_modules? Have a task copy them in? Etc?
Caveat, I was hoping to do this without the browserify-css plugin because I want to keep my css and js separate.
I personally have a Gulp / Grunt workflow setup in which I included my js/css modules and then it automatically do all the important task and at the end I have only one css and js file. Then I import them to HTML.
I suggest you to make task for gulp or grunt which will check for changes in the folder that you decide ( where download of libraries will be ). If there is a change - it will automatically copy the .css files into another working directory.
I hope I understand what you want correctly.
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
I'm using Yeoman to develop a new site with angularJS. I've tried with bower install materialize and bower install angular-material but nothing happens, I mean, it doesn't change the appearance and functionality. I've add also to the index.html these two lines:
<script src="bower_components/angular-aria/angular-aria.js"></script <script src="bower_components/angular-material/angular-material.js"></script>
I guess I may change the css route for the style, but not sure how...
bower install angular-material --save
This will install and (--save) update your package.json file.
when you make use of bower it will automatically update your index.html (add css and js files), you dont have to add any it manually.
In your case i would suggest you to check whether the dependency is added to your app.js or not, this could possibly be issue.
Late to the party but I know how to do it with Angular Projects
Angular 1.xx
Simply import Materialise CSS in your project like this
<script type="text/javascript" src="./js/cdn/jquery-3.2.1.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="./js/cdn/angular.min.js"></script>
<script src="./js/cdn/angular-route.js"></script>
<script src="./js/cdn/angular-animate.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="./js/cdn/materialize.min.js"></script>
<!--Initalize MaterializeCSS-->
<script src="./js/init.js"></script>
Angular 2+
First install materilize and Jquery
npm install materialize-css jquery font-awesome --save
And then import Materialise CSS in angular-cli.json by simply copy paste below script and CSS paths
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/materialize-css/dist/js/materialize.js"
]
Include material icons in the <head> of index.html and you are good to go.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Add the line below to your head to load the css
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
The full skeleton is available at
https://github.com/angular/bower-material/blob/master/README.md
By the way, your bower install and script src both refer to https://material.angularjs.org/latest and not http://materializecss.com/, which is in the title and tags. materializecss is a separate project that provides similar components. You probably don't need both.
There is a nice yeoman generator that will do that for you if you are starting a new project: https://github.com/Swiip/generator-gulp-angular
just select it in the options after:
yo gulp-angular
For existing projects I just use the following repo:
https://github.com/angular/material#bower
which can be implemented by installing angular-material
bower install angular-material
I'm trying out Grunt and have a question about including javascript files in dev and later stages. For clarification: the minify, concatenation, etc is not the problem here - just the output/replacement.
In the dev stage I want to include javascript libraries and files individual - for debugging, maybe just because I did so all time and somehow I don't like them to be concatenated in dev. So in I want the following output in my HTML file when developing:
<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...
And then for production or staging I would like to have grunt output:
<script src="js/all-files-in-one.js"></script>
How to achieve this the simplest way?
You might want to take a look at the grunt-usemin plugin (https://github.com/yeoman/grunt-usemin). Here's a simple example.
Basically, if I have some javascript files I want concatenated into a single file (or sets of javascript files that I want concatenated into single files per set), I can put the script tags that reference those files inside "build" blocks.
<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->
<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->
Now when I run a grunt build that includes the 'useminPrepare' and 'usemin' tasks, those script tags in my index.html will be replaced with this:
<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>
The example and docs explain how you can configure this and use it for other assets, like css.