is there a way to use Bootstrap SASS variables in SASS module?
For example I have file index.module.scss inside my react/NextJS project. How can I use in that sass module variable from bootstrap? Something like this:
.hero{
color: $blue-200;
}
If i just add this import at start of file:
#import '~bootstrap/scss/bootstrap.scss';
I got this error (from NextJS):
Let me notice, that when I use this import in non-module sass file (lets say in file index.scss), then it works. But I need (want) to use SASS modules...
Any idea how to solve it?
Thanks!
Oh, I find a solution. I can add this three imports (instead that one bootstrap imports):
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
These three imports together works and doesn't cause error...
Related
I use React, scss.
I have main scss file with mixins, variables, extends etc. Currently if i want use mixins or variable i need to #import './global.scss'; in each component directly where i want to use it. But most of the time i need these styles in almost all components global.scss.
How i can make global.scss visible for all components without repeating import in each component directly?
Thanks.
there is no such possibility in sass.
The solutions are:
The first and the easiest:
Just include #import in all sass files, it is not bad practice as you will always have control of all vars that are imported in each file in your app.
The second
While building you app via webpack you can find all sass files(that are not started with underscore) in your project and include you import in it.
I am trying to use react-alice-carousel,
And in the section of How To Use, It said something like this.
Style import
SCSS
#import "react-alice-carousel/src/alice-carousel.scss";
CSS
#import "react-alice-carousel/lib/alice-carousel.css";
Webpack
#import "react-alice-carousel/lib/alice-carousel.css";
And I am unable to import these files in my local project and so I am not getting the desired outcome.
You may have the wrong .scss file path. It should be:
#import "react-alice-carousel/lib/scss/alice-carousel.scss";
If you don't have node-sass you'll probably need to import the css file. I'd recommend importing it in your top level css file. Which would be index.css if you're using create-react-app.
Is there any way to import all _*.scss files to main App.scss file in React project? As I have separate folder for each component, I want to avoid typing
#import './components/UI/button';
#import './components/UI/menu';
#import './components/Forms/textInput';
What would be perfect is a working code like this:
#import './components/*';
I'm aware of order problem, I doesn't affect my css, files can be imported randomly.
The glob package will do it if you really wanted. I would advise against it though, including a sass file directly in the component is more efficient but mostly because order matters in CSS.
You can create file _index.scss in components directory and import all files from the subdirectories. After you can import writing #import './components/index'; or #import './components';
How can I get react-css-modules to work with external UI libraries like Antd.
My webpack is setup to compile scss and the styles in the UI library is written in css. Is there a way to get react-css-modules to pick up the styles for the UI library.
I tried add an #import in the index stylesheet for my project but webpack doesn't recognize #import for some reason.
#import '~antd/dist/antd.css';
#import '~antd/lib/style/index.css';
#import './index.css';
import '../node_modules/antd/dist/antd.css';
import "../node_modules/antd/lib/style/index.css";
import "./index.css";
try to this way import the CSS of your packages. Define a proper path of the CSS including node_modules. Try and let me know I hope this will helpful for u.
I'm used in Rails to be able to import many sass or scss files in a single import statement. In my application.scss I'd put the following, which would import all files and folders in the folders base/modules/layouts:
#import 'base/**/*';
#import 'blocks/**/*';
#import 'layouts/**/*';
Is there any way to accomplish this in a Webpack (2.0) and React (15) context?
You can use a preloader like this for webpack https://github.com/Aintaer/import-glob-loader to achieve the behaviour. Basically this preloader expands your import statement before compiling them. Read more on the github page.