I created a project using Vue 2 with the webpack template. In the meantime I'm also working on a "component library" that I'm using locally in the project above (using npm link).
I'm using Stylus in both projects.
Now in App.vue, to be able to customize the appearance of the library, I'm importing the separate stylus files from the linked package like this:
<template>
<...>
</template>
<script>
...
</script>
<style lang="stylus">
#import "~snue/src/stylus/vars"
/*
Override default variables
*/
fontSans = "Ubuntu"
fontMono = "Ubuntu Mono"
fontNumber = "Dosis"
lighter = lighten(light, 5)
lightish = darken(light, 5)
darker = darken(dark, 5)
darkish = lighten(dark, 5)
primary = crimson
secondary = darkcyan
// Import components and style
#import "~snue/src/stylus/components"
#import "~snue/src/stylus/styles"
// Custom styles
#import url("https://fonts.googleapis.com/css?family=Dosis:400,700");
.f-number
font-family: fontNumber, Courier New, Courier, monospace
body
html
margin: 0
padding: 0
html
background-color: darkish
body
background-color: dark
color: light
</style>
Everything works fine, except for the fact that #import url(...) rules with google fonts don't seem to work.
When I run npm run dev the browser uses the fallback fonts I specified and I cannot see any request made in the network panel of the chrome inspector.
When I build the library with webpack and the extract plugin instead, I can clearly see the #import url() rules in the generated css file.
Has this something to do with some Vue setting?
It turns out the problem was postcss-import complaining about #import rules:
#import must precede all other statements (besides #charset)
I reverted back to version 7.* and now it's working fine. If you cannot switch to an older version below is a workaround that initially worked for me.
Workaround for postccs-import > 11.*
It's not a real solution, but I found a way to avoid this problem: I wrapped #import inside a #css rule, and now it works:
// Custom styles
#css
#import url("https://fonts.googleapis.com/css?family=Dosis:400,700");
To my surprise, I can even use stylus variables inside the #css literal block:
// Custom styles
fontNumberSource = replace(" ", "\+", fontNumber)
#css
#import url("https://fonts.googleapis.com/css?family="+fontNumberSource+":400,700");
So I'm ok with this for now
Related
Im fairly new to CSS styling, and currently loading bootstrap into my scss main file, where im setting some colors (primary, secondary, danger, etc.) as a theme.
However, it seems that my button text gets distorted as a result of the color-contrast function in the bootstrap/functions.scss.
I would like to keep using this function for all colors except the "secondary". Is it possible to override this and define the btn-secondary-color without going through the color-contrast function?
Currently my main.scss looks like this:
$primary: #44698E;
$secondary: #90A1BC;
$danger: #D3745F;
$hoverblue: #edf6ff;
$darkblue: #103E67;
$dragoverGreen: #bfe3bf;
$dragoverRed: #e8a09e;
#import "../../node_modules/bootstrap/scss/bootstrap";
$btn-secondary-color: white;
Override bootstrap variables
First you have to import bootstrap, then you can define custom styling for every bootstrap component.
for example:
#import 'node_modules/bootstrap/scss/bootstrap';
.btn-secondary {
color: white;
}
More info here
I'm working on implementing different themes across my website. I've refactored my main stylesheet to feature variables, and have three other "theme" stylesheets that define those variables at the :root level. The final HTML then links to two stylesheets: The main stylesheet and one of the three theme stylesheets, which are switched on button click by changing the link's href attribute. Somehow, only some of the variables are working.
/* dark.css (theme stylesheet only containing the custom properties) */
/* Only --background works */
:root {
--background: #000000;
--seperator: rgba(1,1,1,0.12);
--text: #FFFFFF;
--block-border: #404040;
--block-shadow: #000000;
--block-background: #151017;
}
/* All properties work except for --comment */
code {
--keyword: #F72057;
--type: #FF9519;
--call: #FF5700;
--property: #FF5700;
--number: #F72057;
--string: #F72057;
--comment: #FFFFFF;
--dot-access: #FF5700;
--preprocessing: #646485;
}
When I then go into the inspector, everything seems to be alright. I can see the proper inheritance, and I can even click on the variable where it's used and see the intended color.
Some examples of how the variables are used:
/* styles.css (main stylesheet) */
body {
...
background: var(--background);
color: var(--text);
}
pre code .comment {
color: var(--comment);
opacity: 0.4;
}
Other approaches
I've tried several other approaches, all of which led to the same result (only some variables working).
Instead of linking to another stylesheet, directly change the variables with javascript on the HTML tag
Instead of linking to multiple stylesheets, having three separate main stylesheets
Changing a custom attribute in the HTML tag and defining all variables like [theme="dark"] {...} in one main stylesheet
As #Pushkin and #Temany Afif have pointed out, there were strange characters all over my code. A quick project-wide find and replace solved the problem.
I am building a react-app, created with create-react-app, using bootstrap and react-bootstrap
I have a custom theme that is an npm package, and really just defines some variables.
#myorg/theme/lib/scss/_variables.scss:
$theme-colors: (
primary: #FFFF,
// etc...
)
Then I import this in my "site" theme before importing bootstrap:
./src/index.scss:
#import "~#myorg/theme/lib/scss/_variables.scss";
#import '~bootstrap/scss/bootstrap.scss';
Now I'd like to have components with their own specific styles, that build on bootstrap:
./src/components/MainLayout.scss:
#import "~bootstrap/scss/_functions";
#import "~bootstrap/scss/_variables";
#sidebar {
border-right: 1px solid $gray-400
}
However when I do this, it gets rid of my theme colors, so I have to do this -
./src/components/MainLayout.scss:
#import "../../index.scss";
#sidebar {
border-right: 1px solid $gray-400
}
Is this the correct way to do this? It seems to write the entire contents to the document (bootstrap and all) every time I do this, and I would be doing it a lot for many components. For instance, I have another component where I'd like to customize CardColumns (I actually can't get this to work no matter the import):
//#import ???? I need, functions, mixins, and variables from bootstrap
.card-columns {
#include media-breakpoint-only(lg) {
column-count: 10;
}
#include media-breakpoint-only(xl) {
column-count: 10;
}
}
What is the correct way to use bootstrap 4's scss files in modular react components? Without bloating the download size.
I would create 1 lib.scss file to contain all my import from library
like this name lib.scss
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
then when I create new module like admin module i will simply import like this
#import "./lib";
...
I have a Polymer 2 app with an explicit --paper-font-common-base specified before loading any of the components:
--paper-font-common-base: {
font-family: 'Comic Sans';
/* Not really, nobody's that evil, but problem is there for any font */
};
Then, at some point when loading Polymer components, for instance paper-dialog, will import typography.html
<link rel="import" href="../paper-styles/typography.html">
In turn typography.html imports Roboto and overrides the mixin:
<link rel="import" href="../font-roboto/roboto.html">
...
<custom-style>
<style is="custom-style">
html {
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
This overrides the font face I've specified, but also goes and downloads Roboto from Google's CDN, which I explicitly do not want it to.
Other Polymer components, for instance paper-radio-button take a different approach:
/*
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
*/
How do I set --paper-font-common-base so that Polymer components use the same font as the rest of my application?
Looks to me like <custom-style> is loading directly into your <head> tags as it's wrapped in <script> tags.
To over ride this behaviour you'd need to add your script higher up in the <head> tags also.
One way to get around this is to make your own font-roboto dependency with an empty roboto.html file. Then in your bower.json you would force your dependency to be the resolution to the font-roboto conflict.
I'd suggest to
Fork <paper-dialog>, and remove the import of typography.html
Load your own copy of <paper-dialog>
File a ticket, or a pull request, for <paper-dialog>
If your change is officially accepted, load the official <paper-dialog>, again.
If you want this font to work on the entire web app, is your
--paper-font-common-base: {
font-family: 'Comic Sans';
};
declared into a custom-style element ?
If not try that :
<custom-style>
<style>
html {
--paper-font-common-base: {
font-family: 'Comic Sans';
};
}
</style>
</custom-style>
And if you add that into you root element, it should be applied in all the child elements except if some custom components override their own font.
Edit :
There is a plunker example.
In .bowerrc add this:
{
"scripts": {
"postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
}
}
It will make roboto.html as an empty file without any error requests after build.
Please check the code snippet and comments for details
Gist of problem:
Using ag-grid webcomponent inside a polymer element. As the styles form the local polymer dom doesn't get applied to the grid dom without using /deep/ selector, so I was using a style tag outside the dom-module tag. The styles from the outside tag are getting applied on chrome but it is not working in Firefox.
Example code:
<!--
...
import files and dependencies
...
-->
<style type="text/css">
/*
ag-grid styles defined here are only getting applied in Chrome. Not working in Firefox. But defining styles here is useful as this solves the problem of using /deep/ css selector which is deprecated.
*/
.ag-header-cell {
background: red;
/*
This CSS style will not get applied on firefox and cannot be found on its developer console.
*/
}
</style>
<dom-module id="my-element">
<template>
<style type="text/css">
#grid /deep/ .ag-header-cell {
background: orange;
/*
This style will work both in chrome and firefox. But /deep/ is deprecated and will be removed from browsers soon
*/
}
</style>
<div id="gridHolder">
<ag-grid></ag-grid>
</div>
</template>
</dom-module>
<!--
...
Polymer element js code with ag-grid initialization code
...
-->
Using Polymer version 1.0 and ag-grid enterprise version 8.2.0
Questions:
What is the cause of styles not getting applied in Firefox. Can it be fixed?
Is there a way to apply styles to local dom of ag-grid with out using the /deep/ selectors?
You are not supposed to use /deep/ selector. It is deprecated.
I think you should be adding .ag-header-cell inside your dom-module, and when element is attached you might need to call scopeSubtree when ag-grid updates the DOM.
https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-scopeSubtree