React JS Component based styling - javascript

I have this problem, I have these scss files for all my global variables:
colors.scss
fonts.scss
helpers.scss
And I have these scss files for my component based and import it on top of the .jsx files:
header.scss
footer.scss
searchbar.scss
My problem in all of my component based scss files, I need to import the color.scss and helpers.scss in that way it will be included multiple times in header.scss,footer.scss and searchbar.scss
How do you guys work on it, been searching for an hour and did not found any solutions.
Thanks!

Just make a app.scss file and import all the scss files into that one starting with your variable files.
We do a similar thing at my work and have one file that we import all our component scss files into and any shared dependencies go above those that way you are only having to import once. The main thing is to make sure that files with dependencies go below the dependency files.

Create a global scss like so:
global.scss => imports colors.scss, fonts.scss, helpers.scss
and include it in your root JS file.
This way, every time you create a module, it will have these default styles.

Related

Where to put scss affecting multiple components throughout multiple apps in Angular?

I'm refactoring some Angular (7) components, and I don't know if there is some optimal location to put common scss style to reference it in many components' styleUrls.
Before refactoring, the scss was all global, and had to be built in order to be used between the different apps. Now, most of the scss has been encapsulated, requiring as few global style as possible.
However, there are still some global scss that I could get ride of in the build since they affect a known number of components. In order to do that, I extracted the scss at the root of all those components, and refered it, just before each individual components scss, in the styleUrls. (using some structure tips from this article )
Here is what the import looks like for every components requiring controls.component.scss
styleUrls: ['../controls.component.scss', './autocomplete.component.scss']
The structure looks somewhat like this :
LibName1
src
assets_source
global_styles
_global-files.scss
main.scss
lib
controls
control1
control2
control2.component.html
control2.component.scss
control2.component.ts --> here is the styleUrls
...
controls.component.scss --> the file I'm using to store cross-components style, importing in styleUrls.
Up until this point, everything is working out fine. The problem arises when I want to use this same scss file (controls.component.scss) outside of this app. The more high-level structure of our project and libs look like this :
ProjectName
src
app
components
component1
component1.html
component1.scss
component1.ts --> Where I want to refer to the controls.component.scss in the styleUrls
component2
...
libs
LibName1 --> The LibName1 from the previous structure example
I would like to be able to use the styles in the file controls.component.scss inside different components without having to build the lib and referencing its css in the main Project. I'm open to moving this file somewhere else, and what I would like is not to have to manage super longue relative paths.
I want to know what are the best practices in this scenario.
To use global for your app just put everything into your style.scss it will affect whole application style
If you want to import scss file from the library simply do like this
#import "~bootstrap/scss/bootstrap";
#import "~toastr/toastr";
#import "~font-awesome/scss/font-awesome";
Simply use ~ to import the scss file from node_modules folder

How to override Bootstrap variables in Vue workflow ( Vanilla Bootstrap )?

The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ?
Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file.
This is the directory structure
I have used vue-cli v3.4 to setup the project.
I am using vanilla bootstrap and not the bootstrap-vue components.
Make a file called custom.scss. Go into the node_modules/bootstrap/scss directory and copy everything from _variables.scss. Paste these into your custom.scss.
In your style.scss import your custom.scss before you import bootstrap.scss.
Now in your main.js import #/assets/style.scss.
You will need to remove the !default flag from any variables you wish to override in your custom.scss for them to take effect, as well.
Create a file /css/bootstrap-custom.scss, with the following:
// your variable overrides
// modify theme colors map
$theme-colors: (
"primary":#42b883,
//...other variables, you can find them in node_modules/bootstrap/scss/_variables.scss
);
// import to set changes
#import "~bootstrap/scss/bootstrap";
In the main script, import the added file instead of the current imported bootstrap css file:
// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '#/css/bootstrap-custom.scss';
Reference: Bootstrap, Variable defaults

Vue.js - Loading a global _variables.scss file

Building a Vue app using #vue/cli 3. I am at a point where I need to integrate SCSS, haven't used SCSS with vue before so having some trouble.
My SCSS structure is pretty conventional:
_variables.scss containing all my variables
_layout.scss containing some layout related stuff
_componentX.scss styles for componentX
...
_componentN.scss styles for componentN
app.scss import everything
I want break this up by removing the component#.scss imports from app.scss and instead putting those styles in the component's (SFC) style tags.
When I try this however, the component throws errors for unrecognized variables (even though app.scss is imported in main.js)
The workaround would essentially be importing app.scss in every component. Is this the way to go? (seems strange) or am I doing something wrong?

Overriding imported CSS styles in Vuejs

I am pulling in SweetAlert2 into Vuejs into my app using
import VueSweetAlert from 'vue-sweetalert';
Vue.use(VueSweetAlert);
This imports the whole package from the node_models folder. I now want to override SweetAlert2's sass files so I have copied and imported them into my local sass directories.
However they don't override the node_modules css. How can I configure Vuejs to import and use a plugin but to override the native styling with the copied styles that are in my project without having to put !important all over them?
Try to load your custom css files after the VueSweetAlert import like:
import VueSweetAlert from 'vue-sweetalert';
import '<path-to-your-custom-css>.css';
This seems like a hack or workaround, but it should override the defined css rules in vue-sweetalert.

Do not import "index.js" on folder import?

I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:
/components
/Button
/index.js
/style.scss
/Checkbox
/index.js
/style.scss
I can easily import the components like this:
import Button from 'components/Button';
import Checkbox from 'components/Checkbox';
But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.
What I did now is changing my folder structure to this:
/components
/Button
/Button.js
/Button.scss
/Checkbox
/Checkbox.js
/Checkbox.scss
Which solved that problem and I can see directly where each opened file belongs to.
However, now my component imports look a bit... verbose:
import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';
Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.
You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.
I went with the following solution:
In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:
import module from './Button.js';
export default module;
This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.
I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.

Categories