I just go into create-react-app v2 and I was wondering how the styling is done in projects. There are so many ways to do styling. For instance, if you have .NavBar which also uses a reuseable .container and maybe another class, how do you compose them together? Do you use :root and use compose of css-modules or do you use #extend or #mixins of sass? Or maybe pass an array as className <div className={['navbar', 'container']}>?
How do you do the importing as well? Is importing one index.scss file containing all re-useable classes for each [name].module.scss the way to go?
So every [name].module.scss starts like this:
#import '../../styles/index.scss"
....
.navbar {
display: flex;
}
....
and index.scss has
#import 'layout'
#import 'colors'
#import 'typography'
...
Related
I'm using sass preprocessor on my laravel project.
on all of my stylesheets, i've used css variables for all colors. all of the variables are stored in 'resource/sass/_variables.scss' and imported in the begining of all stylesheet files.
the inside of '_variables.scss' file is something like this:
$primary-background:#1b203d;
$primary-box-color:#2a2b4a;
$primary-border-color: #7277c422;
$secoundary-box-color: #393a66;
$primary-box-shadow: #1a1b2f;
......
and also in my stylesheet i've used variables like this:
#import 'variables';
#sidebar{
background-color: $secoundary-box-color;
border:1px solid $primary-border-color;
// .....
}
now i'm trying to implement dark mode switch using css variables.
I have no idea how to change css variables, consider it that all my stylesheets (with variables) will be compiled and i have no longer access to css variable on the frontend!
you can use css custom properties to assign colors
//_variables.scss
$lightTheme: #fff;
$darkTheme: #000;
//style.css
#import 'variables';
:root {
--theme: #{$lightTheme};
}
body {
background-color: var(--theme);
}
body.dark {
--theme: #{$darkTheme};
}
I use React.JS to develop a web.I want to define all the colors in one class.
In fact, I am a beginner and I only use colors at CSS files. like this:
.toolbar {
background: primary1;
}
I also want to use them in other type classes that may be needed.
Thank you.
Also, sorry about my English.
in Sass, you can declare all your colors in one file:
//colors.scss
$red: #990000;
$black: #000000;
$white: #ffffff;
And then in any other scss file in your project you can import and use any of the declared colors like this:
//style.scss
#import "path/to/colors.scss";
div {
background: $red;
color: $black;
}
You probably have sass build in support inside your react project, but if not, refer to the docs: https://sass-lang.com/documentation
At the moment, my webpack is bundling my CSS styles like this:
//this css is going first, it's supposed to go last
.rbc-btn {
color: red;
}
//this css must be first
.myStyle {
color: green;
}
What I want is to bundle my CSS styles in a specific order, something like this:
.myStyle {
color: green;
}
.rbc-btn {
color: red;
}
How can I fix this with webpack?
Thanks! :)
There was a similar bug that was fixed with extract-text-webpack-plugin#3.0.0, ensure you're using the same version or newer.
If that doesn't help, a common mistake is to load a component first and then loading the CSS files. It has become a common pattern to make every component to import their own styles which can change the style order in webpack if your component is loaded first.
Considering you have index.js like this:
import MyApp from './myApp'
import './myStyle.css'
It means to Webpack that every style imported in './myApp' will be loaded first, so styles applied 'myStyle.css' will appear below other styles, thus overriding them.
The fix could potentially be just changing orders
import './myStyle.css' // parent component imports style first
import MyApp from './myApp' // imports your component along with any other styles
Adding on to Cezar Augusto's answer:
If you have module.css, the import order of the components whose module.css is being bundled together will impact the order!
So for me I needed #import for fonts in my css to be bundled on top first, so in my index.js file, I needed to import my module.css file with my #import first before importing my components whose module.css needed to be bundled later.
How can I apply Vue.js scoped styles to components loaded via <view-router>.
Here is my code:
<template>
<div id="admin">
<router-view></router-view>
</div>
</template>
<style lang="scss" scoped>
#admin {
.actions {
display: none;
span {
cursor: pointer;
}
}
}
</style>
When I visit the /posts a component named Posts will be loaded, inside this component I have a
<div class="actions">
some content
</div>
The problem is that the style defined in #admin is not applied to .action element. When not scoped, this works fine. The problem come when the #admin component styling is scoped.
Is there any way to do that while keeping the .actions style inside the admin component scoped style tag?
This is probably what you want https://vue-loader.vuejs.org/en/features/scoped-css.html#deep-selectors
Since your code snippet specifically uses SCSS you'll have to use the /deep/ combinator.
If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:
<style scoped>
.a >>> .b { /* ... */ }
</style>
The above will be compiled into:
.a[data-v-f3f3eg9] .b { /* ... */ }
Some pre-processors, such as SASS, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.
So you'd end up with:
<style lang="scss" scoped>
#admin {
some-property: some-style;
/deep/ .actions {
some-property: some-style;
}
}
</style>
You can put styles in a separate file and reference it from all components that need it:
<style src="path/to/your/styles" lang="scss" scoped></style>
The reason why router-view tag wont pass styles to its child is because the router-view itself is not a style-able html tag, therefore you cant apply any styles to it. You can try but it wont render.
Reason: The router-view is essentially a template tag, or placeholder for Vue to anchor to and insert the component or View that gets called for that route. As a result, the router-view tag wont appear in the compiled markup, you will only see the View or Component thats being loaded.
It sort of works the same way as the App Entry point works for the Vue App into the index.html file. At least that's my experience and knowledge.
Also, #Antonio Trapani good answer, I would add that you can even go as far as having a scss file with all your global styles, or styles needed across multiple components, then just #import the styles into the App.vue that will give you access across the whole app. Also, IME.
Hope this helps some.
Cheers.
Background
I am using Twitter Bootstrap LESS source with LessJS
I'm using font-awesome.less (referenced from within Bootstrap.less)
I've removed the icons section from bootstrap so they don't conflict.
I have a site.less file which I also reference from within Bootstrap that contains some site-specific styling.
Goal
I would like to be able to do something along the following lines in my site.css file:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
Problem
When I try the approach above, I get the following error:
This error makes sense; I'm just not sure how best to correct it without creating an additional import of font-awesome.less in my site.less (which I imagine would be its own issue).
To clarify: Per comments below: I have a class name that I'm using from a Knockout viewmodel. (for example, if "Praise" is selected, it will apply the class "FeedbackItemPraise"). If FeedbackItemPraise is selected, I'd like it to apply the .icon-thumbs-up class from font-awesome (which displays the icon via a web font) and then also make the color green.
What I have so far
Bootstrap.less customization (only relevant parts shown):
//Sean's customizations
#import "background.less"; // Background images and colors
#import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
#import "site.less"; // site-specific LESS
Class within site.less:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
UPDATED
Upon looking at Font-Awesome again, looks like they have now included mixins for the icons. See the following two files.
https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less
https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less
Use like:
.feedbackItemIconPraise
{
.icon(#thumbs-up-alt)
color:Green;
}
ORIGINAL
If you look at font-awesome.less you will see that class doesn't exist, it's actually .icon-thumbs-up:before. Unfortunately you can't use pseudo classes as mixins, eg .icon-thumbs-up:before;.
You will need to modify your font-awesome.less file (or just add this class, or just put content: "\f087"; directly where it needs to go) so there is a non :before version:
.icon-thumbs-up:before { content: "\f087"; }
.icon-thumbs-up { content: "\f087"; }
Then apply this concept:
.feedbackItemIconPraise {
font-family: "FontAwesome";
font-size: 90px;
padding-top: 7px;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
&:before {
.icon-thumbs-up;
}
}
Seems Font-Awesome icons have to use the :before pseudo for them to show up.
Demo: http://pulse-dev.com/files/stackoverflow/fontawesomeclass/
There may be another solution to this, but I combine my scripts into a single file (automatically) before running it through the LESS compiler. This allows me to define variables and mixins up front that can be used in any of my LESS files.
The online documentation does mention that LESS can include the #import files, making the variables and mixins available. You may need to ensure that you are on the latest version of the compiler and if the import files are organised in a folder structure, you may need to tell the compiler where to search.
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for #import directives
filename: 'style.less' // Specify a filename, for better error messages
});