nuxt vue 引入 bulma jquery

平凡的学生族

发布于 2019-05-25 01:37:11

1.2K00

代码可运行

文章被收录于专栏：后端技术后端技术

运行总次数：0

代码可运行

1.引入 jquery

npm install --save jquery // cnpm install --save jquery

home.vue

<template>
  <section class="container">
    <h1 id="test"></h1>
  </section>
</template>
import $ from 'jquery' // this is necessary.

export default {
  // ...
  mounted () {
    $(function () {
      $('#test').text('ok')
    })
  }
}

2.引入bulma

npm install --save bulma // cnpm install --save bulma

home.vue

<style scoped>
@import url('bulma/css/bulma.css');
</style>

引入bulma出错的心路历程

原本以为是

<style scoped>
@import url('~assets/css/bulma.css');
</style>

结果报错

Error: Failed to find '~assets/css/bulma.css'
    in [
        C:\Users\Administrator\Desktop\vue\nuxt-express\pages,
        C:\Users\Administrator\Desktop\vue\nuxt-express,
        C:\Users\Administrator\Desktop\vue\nuxt-express,
        C:\Users\Administrator\Desktop\vue\nuxt-express\node_modules
    ]

说明nuxt会在以上几个路径找css文件, 所以路径应该改为'bulma/css/bulma.css'

其它错误

<script>

export default {
  async asyncData (context) {

  },
  head () {
    return {
      link: []
    }
  }
}
</script>

If I import the css in 'link' of the above code snippet，则无论路径怎么变, 都报错无法找到该css

如果在nuxt.config.js中的css引入，尽管正常显示，但会warning

 warning  in ./node_modules/_bulma@0.5.3@bulma/css/bulma.css

(Emitted value instead of an instance of Error) 
postcss-custom-properties:  
C:\Users\Administrator\Desktop\vue\sass\grid\columns.sass:328:6: 
Custom property ignored: not scoped to the top-level 
:root element (.columns.is-variable.is-8 { ... --columnGap: ... })

 @ ./node_modules/_bulma@0.5.3@bulma/css/bulma.css 4:14-159 13:3-17:5 14:22-167
 @ ./node_modules/_babel-loader@7.1.2@babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["C://Users//Administrator//Desktop//vue//nuxt-express//node_modules//_babel-preset-vue-app@1.3.1@babel-preset-vue-app//dist//index.common.js"]}!./node_modules/_vue-loader@13.0.5@vue-loader/lib/selector.js?type=script&index=0!./pages/home.vue
 @ ./pages/home.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js