Load CSS Dynamically according to module loaded with Webpack - VueJS

Question

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'
        },

Stephan-v · Accepted Answer · 2017-09-04 08:40:27Z

1

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

answered Sep 4, 2017 at 8:40

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

evzpav Over a year ago

Mine is a SPA, I guess inlining the CSSs on main.js would solve it. As CSS files are small anyways. Thanks!

Collectives™ on Stack Overflow

Load CSS Dynamically according to module loaded with Webpack - VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related