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
Related
I'm new to react and started to hate it
there are literally no documents about how to use CSS frameworks offline with react.
I don't wanna use npm or CDN all the time because I'm usually offline
Is there any way to add materialize CSS and js to react like a normal project with link and script
yes, you can install the assets of materialize from the offical site
https://materializecss.com/getting-started.html
then you can add the files into public folder after that add the following scripts at public/index.html file like that:-
<head>
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<script type="text/javascript" src="%PUBLIC_URL%/js/materialize.min.js"></script>
</body>
but this isn't the best practice for react projects.
I have a fairly basic Dojo 7 (Dojo 2) app built with the dojo-cli tool. Now I'd like to add FontAwesome icons to it. I have a Pro subscription so I have a zip file with various folders of css and web font files that I want to include in my project, then link to from index.html. I believe the Dojo build process uses webpack, and my knowledge of it is extremely limited.
I can link to fontawesome CDN free version in src/index.html easily, which works fine:
<!link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
The Dojo 2 tutorial at https://dojo.io/learn/building/static-assets says I can put static assets in the assets folder, so I extract the zipfile to assets/fontawesome-pro-5.15.3-web and try to link to it in src/index.html:
<link rel="stylesheet" href="assets/fontawesome-pro-5.15.3-web/css/all.min.css">
My intention is to use FontAwesome in the traditional way, not using CSS Modules.
<i class="fas fa-question-mark"></i>
The dojo build process emits a large amount of "copying file blah.css" as it copies assets content to output/dev/assets and I see the FontAwesome files in output/dev/assets/fontawesome-pro-5.15.3-web, however the build gives:
Html Webpack Plugin:
Error: Child compilation failed:
Module not found: Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' i n '/home/username/go/projectname/src':
Error: Can't resolve './assets/fontawesome-pro-5.15.3-web' in '/home/username/go/projectname/src'
- compiler.js:79
[travesty]/[html-webpack-plugin]/lib/compiler.js:79:16
I notice that it's referencing relative to /home/username/go/projectname/src, and the original assets folder is one level above that in the source tree, so I also tried this relative path in src/index.html:
<link rel="stylesheet" href="../assets/fontawesome-pro-5.15.3-web/css/all.min.css">
But this fails differently:
Html Webpack Plugin:
Error: /home/username/go/projectname/src/index.html:97
module.exports = __webpack_public_path__ + "all.min.30RjDni8.css";
^
ReferenceError: __webpack_public_path__ is not defined
- index.html:97 Object../assets/fontawesome-pro-5.15.3-web/css/all.min.css
/home/username/go/projectname/src/index.html:97:18
I have very similar results creating an assets/simple.css file and linking to that with <link rel="stylesheet" href="assets/simple.css"> so this seems a generic problem with my understanding of webpack.
Should I be using the "static assets" approach with these FontAwesome files, and if so how do I fix this build situation, or should I be trying to use this third party CSS library as a CSS Module, and if so, how?
It may be to do with webpack's "publicPath" concept, see https://webpack.js.org/guides/public-path/ .. if so I'd presume I need to do something to my .dojorc to control the Dojo build's use of webpack.
Thanks to #agubler on the Dojo discord channel, the fix is apprently this simple:
<link rel="stylesheet" href="/assets/fontawesome-pro-5.15.3-web/css/all.min.css">
Builds and works fine. Feels dirty to use an absolute URL like that so if anyone has a more meaty, explanatory answer to give, I'd be happy to mark that as the Answer instead of this :)
I'm new in Angular and I have created an Angular 2 application using Visual Studio 2017 Angular Spa template.
I want to add Angular Material to my project and in its guide said that I have to add this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
But I don't know where.
I have add it inside app.component.css file:
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
But I get a warning:
(CssLint) #import prevents parallel downloads, use instead.
I have found this answer, but I don't think it applies to my problem.
Where can I add styles or fonts to use them globally?
Since you're new to Angular, I can only advise you to follow their guidelines.
And one of their guidelines is to create a project using the Angular CLI.
Once you've created the project, if you want to add Angular Material, follow their guide too.
About your font issue : you're not trying to import a style, you're trying to import a font. Fonts goes in the index.html page, in the head. #Gregor placed it well.
In your Angular project folder you should got to src/app/. In the app-folder you can see index.html and styles.css. So this two files are global. You can add font styles in index.html od via #import in styles.css.
In case of your question you should have an index.html in your wwwroot folder. In this example the author does so.
For example index.html:
<html>
<head>
....
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
Answer that you posted actually applies to you, but firstly you should download this font and copy it to your project dir so it can be static asset. Then you can import this file using webpack plugin (look here). I'm not familiar with project generated by Visual Studio you can just simply add your link tag to index.html inside head tag.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
...
</html>
Only add our CSS files to the nonTreeShakableModules array of the webpack.config.vendor.js, e.g. my webpack.config.vendor is like
const nonTreeShakableModules = [
'bootstrap-css-only/css/bootstrap.css',
'font-awesome/css/font-awesome.css',
'es6-promise',
'es6-shim',
'event-source-polyfill'
];
That's because of you have (in the same webpack.config.vendor)
const clientBundleConfig = merge(sharedConfig, {
entry: {
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
}
In case of a font I don't know if the best solucion it's simply add a link in _layout.cshtml as #Gregorg say
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