作用域和全局CSS不适用于Nativescript-Vue

如何解决作用域和全局CSS不适用于Nativescript-Vue

我创建了一个新的Nativescript-Vue项目，但是CSS无法正常工作，作用域和全局。但是像下面的代码块这样的内联CSS可以正常工作。

和

有什么提示吗？ 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