while developping an angular 4 app using angular-cli + sass, i have this problem with multiple plugins. so here is the scenario:
I have a main style.scss file that import other styles files ..., so if i want to modify a plugin style, let say a slider component styles, i will create a slider.scss and import it into my main style.scss file, the problem is that the imported component css is injected into the browser after my main css file. so when i want to modify something i need to add !important to the rule.
here is a snapshot of chrome inspect css tool:
element.style {
left: 100%;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker-large {
height: 10px !important;
}
my custom css is the last one.
I want to know if there is a way to load my css style file after the components css file, i can use precedence rule to make it work, but i want to know if there is a more clean way.
Related
I want to have dynamic color scheme to my pages. Based on the url, I send an API request that fetches the color scheme from the database.
For this, I fetch the colors in the nuxtServerInit store hook. I then use v-bind() in CSS to dynamically color the components.
For reference, https://vuejs.org/api/sfc-css-features.html#css-modules.
Ex:
#main-container {
max-width: 500px;
margin: auto;
background-color: v-bind('designTemplate.backgroundColor');
}
Here, designTemplate is a computed variable that fetches the value from the store.
I am using SSG. On inspection of the generated files, I can see that the colors are not bound to css and the server rendered page does not have the required colors.
In the generated file, I am seeing
.class-name[data-v-15114cda]{background-color:var(--fec1f67e)}
But the css variable fec1f7e is not found in the file. Only during hydration is the colors actually applied.
Update:
Solved the problem. Used an alternate way of accomplishing my requirement.
Instead of using v-bind in css, I created root level css variables. This was done in the head section of my page.
head() {
return {
style: [
{
cssText: `
:root {
--base-color: ${this.designTemplate.baseColor};
--background-color: ${this.designTemplate.backgroundColor};
}
`,
type: 'text/css'
}
]
}
}
With this in place, I can access these variables in all my files and style them as:
#main-container {
max-width: 500px;
margin: auto;
background-color: v-bind('designTemplate.backgroundColor');
}
The css variables are injected in the head of the html and with server side generation, I get a properly colored server rendered page.
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";
...
So I have two components... a Navbar component, and an AboutPage component.
They are both in the same directory, 'App'
App
-- Navbar --> Navbar.css, Navbar.js
-- AboutPage --> Aboutpage.css, Aboutpage.js
So as you can see, they have two separate stylesheets.
In the JS pages the correct CSS file is being imported as well.
When I do a style like this for example:
Navbar Component
p { background: red }
^^ this style also applies to the p's in the Aboutpage. I even tried to give the P in Aboutpage its on id and style it that way and it still failed.
That's the expected behaviour.
No matter which file you specify a rule like p { background: red }, it's going to be applied to all DOM.
Specifying and id attribute to won't work either. The above rule is general enough to apply to all <p>s.
If you want to specify css files for each component, you should also create component specific css classes. Like the following example.
import React from 'react';
import './DottedBox.css';
const DottedBox = () => (
<div className="DottedBox">
<p className="DottedBox_content">Get started with CSS styling</p>
</div>
);
export default DottedBox;
and its css file:
.DottedBox {
margin: 40px;
border: 5px dotted pink;
}
.DottedBox_content {
font-size: 15px;
text-align: center;
}
If you want different ways of defining css for React, this resource adds 3 more ways of doing so, in addition to the above way.
You can also use css modules. They scope your CSS locally and are awesome
Scoping styles to a component requires WebComponents which relies on several newer browser features, particularly shadowRoot "shadownDOM" which supports this separation directly. These are most easily used with lit-element and/or Polymer 3.
Sometimes we need a global CSS which could affect another component even if we use module import, I didn't find anything to answer that in the official documentation, so my workaround is to use something like the following code in the component itself, and, it works fine :)
<style>
{
`
#page {
padding:0;
margin-top:0;
margin-bottom: 0;
margin-left: 0;
margin-right:0;
}
#media print {
#page {
size: 80mm 21cm;
}
}
`
}
</style>
So, I'm building a hybrid app using the Ionic framework and AngularJS.
I created a volume slider with a custom style, using the code below:
style.css
input[type=range] {
-webkit-appearance: none;
height: 9px;
background-image: url("/img/bar.png");
border: none;
width: 280px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 30px;
width: 30px;
background-image: url("/img/slider.png");
}
When I test it in the browser it works fine. But the problem is: to run it in Android I have to add "android_asset/www/" in the image path. For all the images that I'm using in the html, I made a function in the js file that detects if the app is running in Android, and if it returns true, the function automatically add the "android_asset/www/". But in my case, the images for the volume slider's style are added in the CSS, so I can't call the js function.
So, how can I fix it? How to add "android_asset/www/" to the image's path in the CSS only if it is running in Android? Is there a way to call the js function in CSS? Is it possible to change the image's path in CSS from the html?
This is the js function's code:
app.js
$scope.convertAndroid = function(src){
if(device.platform.toLowerCase() === "android") { src = "/android_asset/www" + src; }
return src;
};
And this is how I invoke the function in the html
index.html
<img src={{convertAndroid('/img/something.png')}}>
Well, there is a mistake in the general concept here. A hybrid application creates separate WWW folders for each platform, i.e. web, Android, IOS, etc. For example, following is the general hierarchy:
root project
----wwww
--------platforms
------------android
----------------assets
--------------------www
------------ios
It means that, every platform sees the related WWW folder as the root directory. If you are running on Android, it will read the WWW inside assets. You just have to create the same content for every WWW folder in your project.
I have three projects: Proj A which contains a basic setup with files to be reused in many different projects, non editable. And Proj B and C, which uses the files from Proj A as its base. Each project has its own Gruntfile.
I want to customize some JS and SCSS files in Proj B and C, (e.g change colours/variables). But know that Proj A might be updated every now and then, so I can't edit any of those basic files as they would be overwritten when pulling the latest changes into B and C. I therefore have to create customised files which should override the files from Proj A.
1)
A way of doing it could be to copy the file I want to edit and simply add 'override' to it's filename:
ui/styles/sass/_override_colors.scss *(should override ui/styles/sass/_colors.scss)*
ui/scripts/_override_base.js (should override ui/scripts/base.js)
The problem then is: how do I specify this rule in my Gruntfile, "if any file starting with '_override' exists, is should override its equivalent file".
That might however not be optional if the file I copy is large, as it means two quite identiacall large files.
2)
One other approach could be to add a new file called _overrides.scss and add it in the very end in my #import file. That however would be a bad idea if I am to change a lot of things, as it might be too messy and big and also means duplicate code (unless I am only overriding variables and no classes).
Which approach would you go for? Are there any other better ways to solve this problem?
Thanks!
web.scss:
#import 'colors';
#import 'grid';
#import 'base';
// #import 'overrides'; ?
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: true,
quiet: true
},
files: {
'styles/css/web.css': 'styles/sass/web.scss'
}
}
},
uglify: {
site: {
files: {
'scripts/min/site.js': [
'scripts/dev/forms.js'
'scripts/dev/base.js'
]
}
}
}, ....
I don't think anything should happen at the Gruntfile.js level, as this concerns only SASS.
If you prefer the override way, name the override files as _appB.scss and _appC.scss and add them to the compilation. These files won't get bloated as long as you only do overrides in them.
You might however decide to go the non-override way and create dedicated selectors for each app - which takes some time getting used to but will prove more maintainable in the long run. That way every selector lives a life of its own.
An override example:
_appA.scss (common styles)
.content { height: 80px; max-width: 980px; margin: 0 auto; }
_appB.scss
.content { height: 90px; }
_appC.scss
.content { height: 70px; max-width: 768px; }
markup
<div class="content"></div>
A block/element/modifier "override" example:
_appA.scss (common styles)
.content { height: 80px; max-width: 980px; margin: 0 auto; }
_appB.scss
.content--b { height: 90px; }
_appC.scss
.content--c { height: 70px; max-width: 768px; }
markup
<div class="content content--b"></div>
<div class="content content--c"></div>
The last markup example above is a representation of BEM syntax, which is a popular take on OOCSS.
Me and my colleagues at work maintain complex products and find this workflow very manageable.