Please tell me, is it possible to globally import a library with mixins or variables into the create react app without using eject?
I have a grid, let it be a Bootstrap preprocessor grid that gives mixins for generating grid elements - containers, rows and columns, that is, like this:
.myContainer {
#include make-container();
#include make-container-max-widths();
}
.myRow {
#include make-row();
}
.myCol {
background-color: yellow;
#include make-col-ready();
#include make-col(4);
#include media-breakpoint-down(sm) {
#include make-col(6);
}
#include media-breakpoint-down(lg) {
#include make-col(12);
}
}
I use css module for styles in react and I would like to have access to this mixin in every css module - I can’t find a solution.
Now I’m doing this - in each module I import these mixins at the beginning
#import "./grid/index.scss";
And then the mixins work inside the module.
But the mixin code is duplicated in each of the css modules in dev mode - mixins bring the same code to the tags
style duplicate
Is it possible to specify once what needs to be imported and just use mixins in those css modules where necessary?
Related
I use Bootstrap with SASS in my React (Next.js) project. I would now like to use the SASS variables of Bootstrap in the SASS modules (scoped) of the components.
/styles/style.scss
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/utilities";
#import "~bootstrap/scss/utilities/api";
#import "~bootstrap/scss/containers";
#import "~bootstrap/scss/grid";
#import "~bootstrap/scss/root";
#import "~bootstrap/scss/reboot";
/pages/_app.tsx
import '../styles/style.scss'
/components/text/style.module.scss
.text {
font-size: $font-size-lg;
}
Of course, I now get an error because $font-size-lg was not defined.
How do I provide the bootstrap variables in the module files so I can use them?
What is the problem ?
You are importing the Bootstrap SASS variables file in your global style.scss file. However, the SASS modules (scoped) of your React components are not aware of the variables defined in the global file.
Solution
One way to make the variables available in your SASS modules is to define them again in the module files, this way you'll have to import the variables file in every SASS file.
To avoid importing variables file in every SASS file is by defining them globally in a way that they are shared among all the SASS files. You can do this by using the CSS :export directive.
For example, in your style.scss file, you can define the variables using the :export directive:
#import "~bootstrap/scss/variables";
:export {
font-size-lg: $font-size-lg;
// other variables
}
Then in your SASS modules (scoped) of your React components, you can import these variables by using the :import directive:
:import {
font-size-lg
} from '../styles/style.scss';
.text {
font-size: font-size-lg;
}
Extra
You can also use a library like sass-module-dts-generator that will generate a typeScript file with all the exported variables, this way you'll be able to use them in your JavaScript code.
I have checked the "How to Use Sass with CSS Modules in Next.js" guide at freecodeCamp and it seems that you should import the bootstrap variables directly in your scss module.
Will it not work, if you import your /styles/style.scss in the /components/text/style.module.scss with the following import command?
#import "../../styles/style.scss"
Unfortunately, I cannot check it myself.
I'm trying to build a component library for angular and react. That's why I want to use the same styles(sass) for both libs. I created a separate folder for my styles and included my main sass inside the component. but when I try to make a test npm build and tried to use inside an angular project I paced this problem
how can I solve this?
as found in this blogpost.
create a lib for styles
nx generate #nrwl/angular:library ui
The problem now, is the #import in all the scss files.
How to make them recognize the correct files?
On angular.json on every project the path will have to be included.
"projects": {
"ds-project": {
"projectType": "application",
...
"architect": {
"build": {
...
"stylePreprocessorOptions": {
"includePaths": [ "libs/ui/src/lib/styles" ]
},
"extractCss": true,
...
Now you can import the mixins on the scss files of your project just like if they were still part of the project:
#import "mixins/list_mixin";
#import "variables";
#include list_layout;
Even the base style, like font-family are importable.
Inside the style.scss of the project to became the global styles (for this case the module contains the global styles).
// styles.scss
/* You can add global styles to this file, and also import other style files */
#import 'module';
This question already has answers here:
customizing boostrap with Sass; where exactly should I import bootstrap in my scss file?
(1 answer)
Add new utilities with Bootstrap 5
(5 answers)
How to extend/modify (customize) Bootstrap with SASS
(4 answers)
Closed 1 year ago.
I am trying to customize the predefined Bootstrap colors with Sass following the documentation.
I created a CustomBootstrap.scss file with the following contents:
#import "~bootstrap/scss/bootstrap";
$primary: #2c82c9;
This should normally override the $primary theme color with #2c82c9.
All variables in the $theme-colors map are defined as standalone variables.
But the color stays the same when using it like for example: bg-primary.
I am using React TypeScript, "bootstrap": "^5.0.1", "node-sass": "^6.0.0", other styles work so everything should be imported correctly.
The problem was that the variables should be set before the bootstrap import that way it overrides them, I use the following setup now.
I have a _variables.scss file where I keep my override variables and custom variables.
// overrides
$primary: #2191fb;
// custom
$success-light: #57cc99;
In my custombs.scss file I import the variables file and also do the required imports for adding extra custom variables and do the color setting and map merging.
// import custom variables
#import "./variables";
// required imports
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
// set custom colors
$custom-colors: (
"success-light": $success-light,
);
// merge maps
$theme-colors: map-merge($theme-colors, $custom-colors);
I have a styles.scss file for my other styling.
body {
font-family: "Montserrat", sans-serif;
}
And in my Main.scss I import all the needed files, with bootstrap at last (I believe this is correct).
// font
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&family=Newsreader:wght#200;300;500&display=swap");
// styles
#import "./styles";
// bootstrap customization
#import "./custombs";
#import "~bootstrap/scss/bootstrap";
This way I only need one import in my index file.
import "./styles/Main.scss";
I would like some feedback on this setup, if it is correct, better ways... I am new to scss.
Here I want to generate a separate stylesheet for Landing component and hopefully for other. Other components will have Hero component too. Can anyone tell me how can I do that?. Is it a good idea?.
Anything with an underscore _name.scss, tells your sass compiler that it's a partial scss file. Simply don't use an underscore for single component scss files, for example: Hero.scss. Then in your Hero.js, you can import the style like so:
import './Hero.scss';
<div className="heroContainer">...</div>
or, if your webpack has been configured to allow scss module imports, then you could do:
import { heroContainer } from './Hero.scss';
<div className={heroContainer}>...</div>
If you want to share heroContainer's styles with other stylesheets, simply use the #extend in your scss file.
clientsContainer {
#extend .heroContainer;
}
The downside to this approach is that you'll have to manually import any partials, like _vars.scss, _mixins.scss...etc, and any other dependent stylesheets into each new Example.scss file.
Ideally, if you're working in a large team, it's better to individualize your scss stylesheets, so that everything is modular (components and their styles can be passed off to someone else, instead of having to send ALL of your stylesheets for ONE component).
I'm trying to use React Material Design (react-md) within my Gatsby JS project and am finding that the CSS rules are not being applied. So when I import a component like a Button and render the component, it has no styling on it whatsoever.
Here is what I did to install react-md:
In my gatsby-config.js I added the following
plugins: [
'gatsby-plugin-sass'
]
And then, under layouts>index.scss I have
#import '~react-md/src/scss/react-md';
And then I import that into my layouts>index.js as
import './index.scss'
When I render a Button component, it does not have any styling. I inspected the component and it has all the correct CSS classNames applied to it, but the rules do not seem to be working.
Add to your index.scss in layouts folder
#import url('https://fonts.googleapis.com/cssfamily=Roboto:400,500,700|Material+Icons'); //optional
#import '~react-md/src/scss/react-md'; // Required
$md-primary-color: $md-teal-500; //optional colors
$md-secondary-color: $md-purple-a-400; //optional colors
#include react-md-everything; // Required
NOTE: with #include react-md-everything; you get whole react-md css library.
If you want to minimize CSS prefer to use #import per respective react-md-component based on the following format:
#include react-md-components
e.g. use #include react-md-buttons to the scss-file of your react component where you want to import and use a <Button/> from react-md
Documentation: Minimizing Bundle - react-md docs