The order of imports

[mbursa]

Is there a way to control the order of css imports?

In my app.js I have:

import './assets/css/bootstrap.scss';

import layout_a from './layouts/layout-a.vue';  // contains <style> section
import layout_b from './layouts/layout-b.vue';
import page1 from './pages/page1.vue';
import page2 from './pages/page2.vue';

The output bundle css file contains first the <style> sections from all the vue files (in the order they are imported in app.js) and only then it contains bootstrap css. That of course is not good and bootstrap css has to go first so that scoped styles can override bootsrap rules if necessary.

My rollup.config.js looks like:

import vue from 'rollup-plugin-vue2';
import scss from 'rollup-plugin-scss';
// ...

export default {
    input: 'app.js',
    plugins: [
        vue(),
        scss({output: true}),
        // ...
    ],
};

Thanks.

[hultberg]

After a very quick skim of the code it seems this plugin will process all sass/scss before any css. You can import css files in sass with the @use rule (ref https://sass-lang.com/documentation/at-rules/use#loading-css). Hope this helps.

[emerxom]

After a very quick skim of the code it seems this plugin will process all sass/scss before any css. You can import css files in sass with the @use rule (ref https://sass-lang.com/documentation/at-rules/use#loading-css). Hope this helps.

I log the id before merging..
Is wrong the assumption that all scss are process before css,
is a for(key in object).

[emerxom]

I change the code to achieve wanna I wanted...

 // Combine all stylesheets
      let scss = ''
      let last = 'must-be-last'
      let lastId = null
      for (const id in styles) {
        console.log(id)
        if (id.includes(last)) lastId = id
        else scss += styles[id] || ''
      }
      scss += styles[lastId] || ''

In my option we should have options like

includeFirst:['thisOne.scss', 'thenThis'],
includeLater:['thenThisOne', 'thenThisLast'],

and the scss variable would merge first the id with included

• values in the order they are given in the first array
• all the other excluding the last array
• values in the order they are given in the last array

[emerxom]

@thgh can you tag the issue as feature or something? 😀