So, i develop web app using Angular 7, one of the component however is using complex styling from old project, so i plan to just paste static HTML, CSS, and JS from static old project to one of the Angular component, how to do it?
i.e, I want to paste following HTML structure in Angular component:
<html>
<head>
...
...
<link rel="stylesheets"..
<link rel="stylesheets"..
<link rel="stylesheets"..
</head>
<body>
...
...
...
<script src="...
</body>
</html>
Notice that i need to use CSS and Script on that static page and only contained in single Angular component, i'm aware of declaring global CSS and JS that we need for our project in angular.json, however in this case i dont need global CSS or global JS, only contained on that one component, so, how to do it?
If you only want certain styles contained in a single Angular component then you can define then with inline styles on your template.
1) Wrap styles with style tag:
#Component({
template: `
<style>
h1 {
color: blue;
}
</style>
<h1>This is a title.</h1>
`
})
2) Normal inline styles in the template tags:
#Component({
template: '<h1 style="color:blue">This is a title.</h1>'
})
You can also include the script tags in your template to import a JS file whenever you're using this component.
3) Alternatively you can import the CSS files by using #import in your CSS file for the component:
#Component({
template: '<h1>This is a title.</h1>',
style: '#import url("custom.css");'
})
Related
We build a Vue component(using vuetify) into an existing .net MVC application.
The application loads the webpack into a div.
The problem is that the vue component inherits all the CSS of the existing application.
A simplified HTML version looks like this:
<html>
<head>
</head>
<body>
...
<div class="VUE_CLASS">
//vue component...
</div>
...
</body>
</html>
The Style is written in css.less.
I tried to exclude the VUE_CLASS from all CSS Rules of the existing application by applying a :not(.VUE_CLASS) and a div:not(.VUE_CLASS). I also tried to wrap it around all rules in the css.less:
*:not(.VUE_CLASS){
//...css rules of the existing application
}
It doesn't work
I read about some other strategies (https://kloudless.com/blog/2019/02/05/creating-a-reusable-vuetify-component-to-use-in-other-apps/). Using an iframe is not an option because we can't access our backed from an iframe. I can't use Web components as well, because we have to support ie11.
Is it possible to exclude the div and all its child elements using less?
Thank you & Best regards,
Finn
What if you just reset all CSS styles for VUE_CLASS selector?
Try adding this rule at the end of the <style> tag:
.VUE_CLASS {
all: unset !important;
/* Write the other styles for this component below */
}
var myComponent= Vue.extend({
template:
`
<div class="container">
</div>
`
,
props: [],
components: {}
,
data() {
return {
}
},
methods: {
}
})
I have a component above that is created using the Vue.extend. It takes in data, methods and other things that are all locally scoped. I'm wondering if I can have CSS that is locally scoped to this component within the object passed to vue.extend()
I'm not using nodejs (using django) so I don't think I can use the recommended syntax within .vue elements (If I'm mistaken and I can use .vue files and the below syntax please let me know):
<style scoped>
/* local styles */
</style>
You may include this in your template string property:
template: `
<div class="container">
...
<style scoped>
/*your css*/
</style>
</div>
`
This style tag will attach all the css to your parent container element as root, so it won't affect your entire document.
Currently, I have to import css file conditionally depend on which kind of browser users are using. To not making css file global, I have the following code:
created() {
this.checkIsMobile()
},
methods: {
checkIsMobile(){
var isMobile = new MobileDetect(window.navigator.userAgent);
if (isMobile.mobile()){
$('head').append('<link rel="stylesheet" type="text/css" href="#/assets/css/main-pc.css">');
}else {
$('head').append('<link rel="stylesheet" type="text/css" href="#/assets/css/main-m.css">'); //must be load external css
}
},
It does not work because it's internal css.
I can not import in style tag because there are some link to other images in my css. Importing in style will lead to relative modules were not found
How should I do with without uploading css file to somewhere?
Edit: This question is theoretically the same as what I just did (without jQuery)
Vuejs compiles in a different way, so import or adding internal css file to head does not work. Simply use require:
if (isMobile.mobile()){
require('#/assets/css/mobile.css');
}else {
require('#/assets/css/pc.css');
}
Can you try the following method?
<style scoped>
#import './../file.css';
</style>
Source URL: https://forum.vuejs.org/t/how-to-import-css-files-into-single-file-component/41337
You shouldn't use JQuery. It is slow, big size and everything that you using jquery you can do in Vue.
Second, you shouldn't detect screen size in JS, but in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have a custom Polymer 2 video-player element and I want the ability to pass in a property to each element instance in order to define which stylesheet to apply to it (different theme names are released each year and each set of styles currently exist on the server in their own file which has a predictable naming format). I saw some examples with inline tags, but that seems to only be an acceptable solution for smaller styles (otherwise it gets out of control for me to jam all my styles in there, which there are a lot of). How can I do the theme-ing properly?
Here's what I got so far in two separate HTML files:
Demo File (demo-page.html)
<link rel="import" href="../my-video-player.html">
<my-video-player data="{...}" theme="2016"></my-video-player>
<my-video-player data="{...}" theme="2017"></my-video-player>
Component File (my-video-player.html)
<dom-module id="my-video-player">
<template>
<link type="css" rel="import" href="css/[[theme]]/styles.css">
</template>
<script>
class MyVideoPlayer extends Polymer.Element {
...
}
</script>
</dom-module>
Note: I tried putting the above link tag one level outside of the template tag as well, but that didn't work.
Right now what happens is only one of the two theme stylesheets get applied to both of my components. What I need instead is for the first component to get the 2016.css stylesheet applied to it, while the second gets the 2017.css stylesheet.
To add external stylesheets, you need to create a custom component that contains all the styles you want. Then, you can link the "style" component into the component(s) using the styles like this:
<link rel="import" href="/shared-styles.html">
<dom-module id="sus-app">
<template>
<style include="shared-styles"></style>
<style>
neon-animated-pages {
height: 500px;
}
neon-animatable {
padding-top: 2em;
padding-left: 10em;
padding-right: 10em;
}
Notice that you can still include styles unique to the component that she shared styles are being used with.
In order to use "Bootstrap Select" only in my.component.ts, I tried use this:
#Component({
templateUrl: 'my.component.html',
styleUrls: [
'my.component.css',
//Bootstrap Select
'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css'
]
})
I got this error :
Can't resolve './https://cdnjs.cloudflare.com/...' in 'C:.....\app\components'
It seems that angular 2 search for bootstrap in my folder. So can I tell him that it is an external URL?
I am also need to add my js link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
From angular styles documentation.
Style URLs in metadata
You can load styles from external CSS files by adding a styleUrls
attribute into a component's #Component decorator:
#Component({
selector: 'hero-details',
template: `
<h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
/* . . . */
}
The URL is relative to the application root, which is usually the location of the index.html web page that hosts the application. The
style file URL is not relative to the component file. That's why the
example URL begins src/app/. To specify a URL relative to the
component file, see Appendix 2.
You can also embed tags into the component's HTML template.
As with styleUrls, the link tag's href URL is relative to the
application root, not the component file.
#Component({
selector: 'hero-team',
template: `
<link rel="stylesheet" href="app/hero-team.component.css">
<h3>Team</h3>
<ul>
<li *ngFor="let member of hero.team">
{{member}}
</li>
</ul>`
})
CSS #imports
You can also import CSS files into the CSS files using the standard
CSS #import rule. For details, see #import on the MDN site.
In this case, the URL is relative to the CSS file into which you're
importing.
#import 'hero-details-box.css';
Now. For one of your purposes you could need to change encapsulation. It is the topic here. Load external css style into Angular 2 Component Give a look. It solves you for adding an external CDN but I wanted to give full info and why is it needed. To ensure you it is the only that solves your scenario.
Also, other suggestions there up resolves you for adding script tag. I suggest just add it to your component template, as you should do directly in the html what is yet specific of your component.
You have to give it a relative path to your file.
starting with "./ here goes the path to your css file /my.component.css"
And for the second css file thats being called. That one goes into your index.html file like so:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">