I have a VueJS application that uses Webpack 2. I am working on VueJS and I will work with a webdesigner that will add CSS classes to the app. The designer wants to have 1 CSS file for the login page (login.css), 1 CSS file for after login (app.css), and etc. So the things is that it is not necessary to load app.css at the login page and vice versa. Besides that the CSS files may have the same classes but will be used for different things. Example: for body tag, he will use font-size 10px in login.css, and on app.css the same body tag he will use font-size 12px. Now I import in my main.js file the CSS files:
import '../src/assets/css/login.css';
import '../src/assets/css/app.css';
This way whatever is on app.css overrides login.css.
So how can I load just the CSS files needed (when I need them) so that they will replace each other. Like, for login page load login.css then for after login load app.css?
Currently I am using in the webpack.config.js the following:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
You are currently inlining both of these styles in your javascript so everywhere you import main.js these styles will also be included.
You need to either be specific with your imports and use your import on the page where you need it(if you have a single page application).
If you don't have a SPA you need to extract the CSS from your imports to separate files which you can include yourself with a <link> tag. You can do this by using this Webpack plugin:
https://github.com/webpack-contrib/extract-text-webpack-plugin