I use Laravel Mix to compile and extract component css to single file such as app.css. For example I have a component like this:
<template>
<div class="text"> </div>
<template>
...
<style>
.text{ color: red; }
</style>
In webpack.mix.js is:
mix.autoload({
jquery: ['$', 'window.jQuery','window.$'],
quill: ['window.Quill','Quill']
});
mix.options({
extractVueStyles: 'public/css/app.css',
});
mix.js('resources/assets/js/app.js', 'public/js')
.sourceMaps()
.version();
and I put this code in master..blade.php
<link rel="stylesheet" href="{{ url(mix('/css/app.css')) }}">
But app.css is empty and my component css put in html>head as inline style:
<html>
<head>
...
<style>
.text{ color: red; }
</style>
</head>
...
</html>
What should I do to extract and put all component css in app.css?
Related
Say i have the following css file:
.testClass{
color:red;
}
And the following index.html file:
<html>
<head>
<meta charset="utf-8">
<title>Portal Demo</title>
<link rel="stylesheet" href="test.css">
<script type="module" src="../build/portal-app.js"></script>
<style>
p {
border: solid 1px blue;
padding: 8px;
}
</style>
</head>
<body>
<i class="fa fa-times"></i>
<portal-app>
<p>This is child cosntent</p>
</portal-app>
</body>
</html>
And inside of the portal-app i have the following code:
import 'sdk-button'
#customElement('portal-app')
export class PortalApp extends LitElement {
render() {
return html`
${this.renderWidget()}
`;
}
renderWidget() {
import("./views/my-test-element");
return html`
<i class="fa fa-times"></i>
<sdk-icon-button text="hello marc"><p slot="icon" class="testClass">hello</p></sdk-icon-button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'portal-app': PortalApp;
}
}
When i run this the color of the .p tag is not red and i can't see the style. however i just add a normal p tag to html the color correctly turns red.
But it seems that inside my slot i am unable to pass the css class that is defined in the index.html can anyone tell me why?
This is expected behaviour as per Web Components Shadow DOM specifications.
In your code
<p slot="icon" class="testClass">hello</p>
This template is part of PortalApp Web Component. Which means this markup is in the Shadow DOM of Portal App web component. No css styles from outside (index.html) in you case can get applied to this markup. vice- versa is also true, i.e, no CSS leak from the component to outside of component will happen
I am using webcomponents-lite (Polymer) to create webcomponents.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="/static/js/util.js"></script>
</head>
<body class="dark">
<main>
<edsp-login-form></edsp-login-form>
</main>
</body>
</html>
<edsp-login-form> is defined in js file where it uses lit-html. The definition as follows:
#Define('edsp-login-form', {
style: ``
})
export class Login extends LitComponent {
render() {
return html`
<link rel="import" type="css" href="styles.css">`
<div></div>
}
}
In this code, how do apply css classes from styles.css to a component <edsp-login-form> ?
Option 1: If you're using Shadow DOM, you can't apply external CSS to your component. A solution is to deactivate the Shadow DOM by implementing this in your component:
createRenderRoot() {
return this;
}
Option 2: If you still want to apply external CSS and use Shadow DOM, you can use CSS variables. In your external CSS you can instance the variable using something like:
name-of-your-component-tag {
--variable-name-color: #FFF;
}
and then in your component, you can use the CSS variable:
.my-class {
color: var(--variable-name-color);
}
Option 3: And if you're trying to apply a dark theme, you can use the CSS inside of your component considering the context. In your component you can use CSS like:
:host-context(.dark) .bg {
background: #000;
}
I'm having trouble understanding why I can't pass a custom CSS property for a background image to a polymer element. Using CCS properties for styling Polymer elements is explained here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details and this works for some elements (example the grey background in my code below).
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, white);
background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
/* THIS WORKS
background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
*/
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
Polymer({ is: 'my-element'});
</script>
</dom-module>
<my-element></my-element>
</body>
I have two question:
Why isn't this working?
What is the best way to solve this?
Code is here: http://jsbin.com/yuxobexepe/edit?html,output
Thanks!
Paul
You are mixing the definition/usage of CSS property. Here is a working JSBIN of your problem:
<html>
<head>
<base href="http://polygit.org/polymer/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, blue);
background-image: var(--container-background, "default.png");
--container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({ is: 'my-element'});
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
background-image is using the value of --container-background if it exists, or default to what you give. Then you define separately the --container-background property, usually, outside of the component itself.
-My css3 vars are not showing. Here is the setup (scripts are removed and assumed all is well):
<dom-module id="my-app">
<style>
.tester {
color: var(--my-app-tester-color);
}
</style>
<template>
<div class="tester">abc</div>
</template>
</dom-module>
// app-theme.html:
<style is="custom-style">
my-app {
--my-app-tester-color: red;
}
</style>
I am following Rob's Polycast tutorial but nothing works.
I have an admin page like this:
<div class="admin_page">
<div ng-repeat="user in users">
<div class="my-form-group">
<textarea class="my-form-control">{{user}}</textarea>
</div>
</div>
</div>
This is my main.scss file:
.my-form-group {
#extend .form-group;
.my-form-control {
#extend .form-control
}
}
#import "./admin.scss";
This is my admin.scss:
.admin_page {
textarea {
height: 200px;
}
}
The height of text area is not set.
I tried <textarea class="my-form-control" style="height:200px">{{user}}</textarea> and it works.
Why is the sass version not working?
Edit:
this is my heading:
<!--underscore-->
<script src="/node_modules/underscore/underscore-min.js"></script>
<!--jquery-->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<!--bootstrap (keep the css although duplicate in bundle, since some may depend on it)-->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--font-awesome-->
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">
<!--summernote-->
<link rel="stylesheet" href="/node_modules/summernote/dist/summernote.css">
<!--<link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs3.css">-->
<script src="/node_modules/summernote/dist/summernote.min.js"></script>
<!--angular-->
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-resource/angular-resource.min.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<!--angular-summernote-->
<script src="/node_modules/angular-summernote/dist/angular-summernote.min.js"></script>
<!--bundle-->
<script src="/public/script/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/public/style/bundle.css">
Note that I imported sass version of bootstrap in main.scss, which means inside bundle I have the bootstrap css.
The reason I include the original non-sass version bootstrap is for summernote, which depends on bootstrap.
Edit 2:
I tried the following:
.admin_page {
.my-textarea {
#extend .my-form-control;
height: 500px;
}
}
which has a specificity of 0,0,2,0 (2 classes), it doesnot work
Also this:
.admin_page {
textarea.my-form-control {
height: 200px
}
}
which has a specificity of 0,0,2,1 (2 classes + 1 element), it works. Why is the previous one not working?
It is not problem of sass. It is clearly the problem of specificity.
You just need to mention high specificity css. Since you have a class to the textarea, you can do like this:
textarea.my-form-control{
height: 200px;
}
Read this to understand how specificity works in css.