is there a mechanism in the react ecosystem to import sass files only when a component is loaded? For example, I may have the following structure:
client/
main.scss
routes.jsx
main.html
imports/
components/
componentA/
ComponentA.jsx
ComponentA.scss
componentB/
ComponentB.jsx
ComponentB.scss
Let's say ComponentA is used only in the public area while ComponentB is used only in the admin area. If I #import both component stylesheets into the main.scss file, the public will be downloading extra data they will never use. Is there any solution to this problem in the sass world?
Since you are using meteor this is what you can do, use import in your jsx file
In your ComponentA.jsx file use:
/imports/components/componentA/ComponentA.scss
If you want to get the scss file only if you are rendering the component, then you can do a require of this file in the render method instead of using import in the file.
Here is the link :
https://guide.meteor.com/build-tool.html#css-importing
Related
Can I Import css files directly into a component in Nextjs and use the classnames directy without the default named import method.
I have a huge html project and I want to convert it into Nextjs, But the styles are conflicting when I import it in the _app.js file, and if I convert the style files into .module.css files and import with a name, then I have to manually change every where.
Is there anyway to solve this?
I created a SPA with CRA. react version is 17.0.2 and the node-sass version is 6.0.1.
The current folder structure of the project looks something like this:
Inside the Styles folder, I have all the scss util files such as color variables, general styles, classes, and typography. The folder has a main.scss file where I import all the other sub-style files. "styles/main.scss".
If I directly import the file into any folder inside my project I can use those variables and styles defined in it.
Is there a way for me to, instead of importing it every time, just import the file in the main "index.scss" (located in src/index.scss, which is imported in src/index.js) and use the style in inner component styles?
To summarize what I need to be done;
To import the styles written inside of src/styles into index.scss insrc
To use the variables and styles in those files from inner component style files without importing index.scss or any other helper file
is it possible with the react's CSS compiling abilities with maybe some modifications to the webpack configurations?
This is a very specific question, but I am using the Chakra UI component library for React and I want to import my own custom css files, although it doesn't allow me to do this.
I don't know if this is a bug or if it is intended, but is there any way I can go around it?
Thanks.
Make sure that you import css files in right place. Try to import your css files into App.js or if be more specific into the file where you init ChakraProvider. This approach works fine for my project:
import { ChakraProvider } from '#chakra-ui/react';
import './yourCssFile.css';
You can extend or override a token in the default theme by importing the extendTheme function. You can override properties as well as add new ones.
But if you want to add an external CSS file, I've found out from reading the docs that in order to import other file types (.css, .woff or .svg) in your theme file, you'll need to move those imports out of the theme file.
When we import an image in react, we get its file path in the directory, and we can directly link it in the src attribute of an <img/> tag like so:
import some_icon from "../assets/images/some_icon"
and then :
<img src={some_icon}/>
here, some_icon contains the path of the image that can directly be used in the src attribute.
In the same way, I want to import just the file path of a css file and not the styles of the file.
Is there a way to do that?
Yes just import like this:
import "../assets/css/style.css";
and then the style will auto apply to what you're selecting in your css file.
Your question implies you are using a React-based framework that has webpack inbuilt, probably Create React App.
When you use import some_icon from "../assets/images/some_icon", what is actually happening is that the image-loader is going to fetch the image (some optimizations may occur where in some cases, a base-64 version of the image is fetched and in some cases the file is copied to the build folder and the new filename is used).
To get the CSS, I recommend importing like so import "../assets/css/style.css"; This is better than importing in the HTML file because the CSS loader may combine all the CSS files used in the project and the output will be one giant CSS file.
I have an app created using react-create-app tool and I use a style.less file in src/assets/less that is compiled automatically.
In my style.less I import the style I have in the various react components in my app. I like the idea to have every component with his own style.less in there.
The first problem is the reference I have to add or update in the src/assets/less/style.less, every time I add a component or I rename it or I move it. Is there any way I can get all the import automatically?
If your webpack.config.js is configured correctly, you should be able to import each components styles like:
import './style.less';