In my VueJS application, I am using Webpack 2 to manage the modules. As I collaborate with a web designer on styling, we have decided to organize the CSS files in a specific way. The designer prefers having separate CSS files for different sections of the app - one for the login page (login.css), another for after logging in (app.css), and so on. The challenge is that we don't want unnecessary styles to be loaded on certain pages. Additionally, the CSS classes may overlap but serve different purposes. For instance, the body tag might have different font sizes in login.css and app.css.
To include these CSS files, I import them into my main.js file:
import '../src/assets/css/login.css';
import '../src/assets/css/app.css';
This leads to the styles in app.css overriding those in login.css by default.
My question is how can I selectively load the required CSS files based on the page being accessed? For example, load login.css only for the login page and switch to app.css after logging in?
Currently, my webpack.config.js includes the following configuration:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},