CODEWITHSUNDEEP
javascripthtmlcssvue.js
claws
claws

Reputation: 54200

Importing css in javascript versus Importing in css

Hello I'm new to webdev & vuejs.

In vue3 recommended way of importing css files of different packages is:

Import directly in app.js (method 1)

//app.js
import '../css/app.css';
import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/primevue.min.css';

Instead, if I do import in app.css & import it in app.js (method 2)

//app.js
import '../css/app.css';

//app.css
@import 'primevue/resources/themes/saga-blue/theme.css';
@import 'primevue/resources/primevue.css';

My questions:

  1. Why import css in js (method 1). What advantage do we get over importing other css files in main.css?
  2. Are method 1 & method 2 one and the same? If they are different, how are they different?
  3. Is this a vue specific thing?

Upvotes: 3

Views: 2215

Answers (1)

Daniel Cruz
Daniel Cruz

Reputation: 2329

Ill address your question in a different order, hopefully its gonna be clearer

1. Are method 1 & method 2 one and the same? If they are different, how are they different?

Essentially they can produce the same result but they behave differently. When you use @import from your css file, Vue will load the file during the bundling process and the contents of the imported file will be downloaded inside of the main file. On the other hand, each file imported in javascript will be imported one by one after the javascript load.

I made a little example here: I imported 3 css files using @import and another 3 using import from javascript Setup Result

As you can see, only the main.css file is loaded in the browser, while the three files imported in JS were loaded separately. If I examine the contents of the main.css file ill find that the contents of the three imported files are inside there.

2. Why import css in js (method 1). What advantage do we get over importing other css files in main.css?

Well as always it depends on what you want. Most of the time I'd recommend you to always import from your CSS using @import because you reduce the number of requests and is easier to navigate the code.

However an advantage of importing from JS could be to group styles and scripts that are needed together but you don't want the developer to import them separately. For example if you have plugin for a special table that you want to use in many places; if this plugin needs some styles to work properly then it may make sense to import them from the javascript; this way when you need to use the plugin, you only need to import the javascript module and the module will import all the styles it needs.

3. Is this a vue specific thing?

Well, Yes and no. @import and import are css and js native functionalities that can be used outside Vue projects, but they can behave differently. For example in a normal CSS file, @import files will actually load separately because the browser will download them when the CSS that imported them is analyzed. enter image description here

Also different frameworks (like React) may use different module bundlers (like web-pack) that behave differently. So in short the behavior of this functionalities depends on the framework you use, or more specifically the module bundler that the framework uses.

Upvotes: 5

Related Questions