Scoped and global CSS not applied to Nativescript-Vue

Question

I have created a new Nativescript-Vue project but the CSS is not working, scoped and global. But inline CSS like the code blocks below are working properly.

<ActionBar style="background-color: green" flat title="Nativescript">

and

<ActionBar backgroundColor="green" flat title="Nativescript">

Any tips? TIA

Here is my main.js:

import Vue from 'nativescript-vue'
import Home from './components/Home'
import VueDevtools from 'nativescript-vue-devtools'
import FontIcon from 'nativescript-vue-fonticon'
import store from './store'

if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools, {
    host: "192.168.42.28" // IP of the machine you are writing your code on, _not_ the Device IP your app runs on 
  })
}

// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')
Vue.use(FontIcon, {
  debug: true, // <-- Optional. Will output the css mapping to console.
  paths: {
    'fa': './assets/css/fontawesome.min.css',
    'far': './assets/css/regular.min.css',
    'fas': './assets/css/solid.min.css',
    'fab': './assets/css/brands.min.css'
  }
})

new Vue({
  store,
  render: h => h('frame', [h(Home)])
}).$start()

And here is my Home.vue

<template>
    <Page>
        <ActionBar style="background-color: green" flat title="Nativescript">
          <ActionItem ios.position="right">
            <FontIcon name="fa-shopping-bag" type="fas"/>
          </ActionItem>        
        </ActionBar>
        <StackLayout>
            <Label class="message" :text="msg"/>
        </StackLayout>
    </Page>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Welcome to Nativescript',
      }
    }
  }
</script>

<style scoped>
    ActionBar {
        background-color: #53ba82;
        color: #ffffff;
    }

    .message {
        vertical-align: center;
        text-align: center;
        font-size: 20;
        color: #333333;
    }
</style>

Igor R. · Accepted Answer · 2020-09-13 10:25:17Z

4

This issue has been fixed in @nativescript/[email protected].

Make sure you update the webpack plugin:

ns clean

npm i --save-dev @nativescript/webpack@^3.0.3

ns run <platform>

Details in pinned issue: https://github.com/nativescript-vue/nativescript-vue/issues/715

answered Sep 13, 2020 at 10:25

Igor R.

8975 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Scoped and global CSS not applied to Nativescript-Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related