Framework7 IOS/Material theme CSS is appended to head of document after components CSS

[ryanmstokes]

It is not possible to overwrite Framework7 CSS classes as the Framework7 theme css is appended to the head of the document after any custom CSS declared within components.

Here you can see that I have written a class to overwrite the behaviour of this class:

@media (min-width: 768px){
    .tabbar a.tab-link, .tabbar a.link {
        width: auto;
        min-width: 105px;
    }
}

but its not possible as it appended before the frameworks theme CSS and so is overwritten.

Can you point me in the right direction as to how load the frameworks css first before any additional css I have written in components?

Many Thanks!

[scriptPilot]

OK, wrong order in my eyes - recognized as a bug.

[scriptPilot]

OK, seems the issue is well known ...

webpack/webpack#215
babel/babel#2061
webpack/webpack#1343
webpack-contrib/extract-text-webpack-plugin#200

etc. ... maybe something wrong with App Framework Webpack setup?

[anna-luyufeng]

@ryanmstokes, @scriptPilot

I solved this by adding beneath code after app.js#L708

app-framework/client/app.js

Line 708 in e7ea070

created: function () {

beforeCreate: function () {
    this.theme = window.localStorage.theme ? window.localStorage.theme : this.config.theme.split('-')[0]
    if (process.env.NODE_ENV === 'development') {
      if (this.theme === 'ios') require('./ios')
      else require('./material')
    } else {
      window.Dom7('link').each((i, el) => {
        let href = window.Dom7(el).attr('href').match(/^(ios|material)\.(.+)\.css$/)
        if (href !== null && href[1] !== newTheme) {
          window.Dom7(el).remove()
        }
      })
      window.Dom7('script').each(function (i, el) {
        let src = window.Dom7(el).attr('src').match(/^(ios|material)\.(.+)\.js$/)
        if (src !== null && src[1] !== newTheme) {
          window.Dom7(el).remove()
        }
      })
    }
  }

Additionally, if you want to change the order of icon and framework CSS file, you can change mixins code loadIconFonts after manageTheme.

Hope it helps. ：）

[scriptPilot]

In V3, the order is ok:

• default F7
• icon fonts
• app.css
• app module / page module css