Блог

Я создал новый проект Nativescript-Vue, но CSS не работает, ограниченный и глобальный. Но встроенный CSS, подобный приведенным ниже блокам кода, работает должным образом.

<Стиль панели действий =»цвет фона: зеленый», плоский заголовок =»Nativescript»>

и

<Панель действий backgroundColor=»green» flat title=»Nativescript»>

Какие-либо советы? TIA

Вот мой 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()
  

И вот мой 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>
  

Эта проблема была исправлена в @nativescript/webpack@3.0.3 .

Убедитесь, что вы обновили плагин webpack:

 ns clean

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

ns run <platform>
  

Подробности в закрепленной проблеме:https://github.com/nativescript-vue/nativescript-vue/issues/715