I hope I can keep this brief.
The basic jist of my issue stems from SASS imports.
I have an App Component that handles all the routing.
In the imports is a Login Component. In this component is an a .scss import
import './Login.scss';
In this file is imports of various other .scss files.
Another route in my App component is ForgotPassword component.
Similar to Login it has a .scss import of its own.
Now, the issue is, if a user loads the Login component, it means that all the css and imports are stored in a css file and that carries over to every other component in my project.
Let's say one of the .scss imports was something like Card which styles .Card classes. I have a variable
$Card-padding: 15px !default;
In ForgetPassword I also have that import. First issue is that I now have two imports of Card and if I try to override the $Card-padding variable it will also override on Login.
I am currently using react-loadable in my App component where I handle my routes.
import React from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';
const Login = Loadable({
loader: () => import('../../login/Login'),
loading() {
return null;
}
});
const ForgotPassword = Loadable({
loader: () => import('../../forgot-password/ForgotPassword'),
loading() {
return null;
}
});
const App = () => {
return (
);
}
export default App;
My question really is, can I remove unused CSS with React and Webpack, or is there a better method of css containment so that it cannot be accessed outside of the component?
I feel like this is something that lots of people do, but I cannot seem to find out how to do this. There may be a term that I have missed which would lead be to the correct resources. But I am lost. I'm not a huge fan of css in js, a lot of the styling comes from another project that is similar so is much simpler to copy it over other than having to write css in js for each class and permutation.
Every question on this on here does not have an accepted answer, so I'm throwing a Hail Mary in the hopes that someone has a React/Webpack solution to this.
I had tried ExtractTextPlugin in webpack, but it never seemed to spit out the Login.scss, so I may have configured it incorrectly. I am currently using MiniCssExtractPlugin to compile my scss files.
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
