In my React app, instead of using styled-component or CSS-in-JS or importing a particular SCSS file into a component,
I used the SMACSS method where the only stylesheet that's being imported is the index.scss, which imports all the SCSS
files inside the styles directory.
Initially, I did the method of importing each SCSS file,
but I changed my mind after realizing that my file structure was messy and switched to the less modern way.
I'm just
wondering if there's a difference between importing each stylesheet and importing only one in terms of performance and
speed of an app.
I don't think it will make much difference in performance but you would be better off building up the good structure of code which is always recommended.
It's always good practice to create the single folder scss and then provide the references in main.scss of other files in folders like this way.
#import 'var';
#import 'mixins';
#import 'normalize';
#import 'default';
#import 'global/inputs';
#import 'global/btn';
#import 'components/modal-general';
#import 'components/modal-tabbed';
Then you can also use this single reference main.scss or index.scss in app.js or index.js
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';
Im currently learning reactjs and Ive just added SASS to my project. However, I want to create a single file that stores all my variables and mixins globally that can then be used by any other scss file in my project. How is this possible without having to manually import the file into every scss file that i make?
My folder structure:
/src
assets/
images/
components/
app/
app.js
app.scss
styles/
scss/
main.scss
_var.scss
_mixins.scss
_typography.scss
index.css
index.js
You'll have to import your variables at the top of a master import file, with all other imports coming after. So, assuming your directory structure above, in main.scss you'd want to do:
#import 'var';
#import 'mixins';
#import 'typography';
...
// Component imports
#import '../../components/app/app';
Alternatively, you could set up a shared master import file somewhere closer to the base of your project (say, index.scss), which would then look like:
// in `styles/scss/main.scss`
#import 'var';
#import 'mixins';
#import 'etc';
// in `index.scss`
// Base style import
#import 'styles/scss/main.scss';
// Component imports
#import 'components/app/app';
#import 'components/etc/etc';
The important factor here is that you need to be importing anything that needs access to your shared variables after your variable import. Otherwise the variables won't be in scope.
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.