nuxt vue 引入 bulma jquery

1.引入 jquery

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

home.vue


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



引入bulma出错的心路历程

原本以为是


结果报错

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'

其它错误


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


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

 warning  in ./node_modules/[email protected]@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/[email protected]@bulma/css/bulma.css 4:14-159 13:3-17:5 14:22-167
 @ ./node_modules/[email protected]@babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["C://Users//Administrator//Desktop//vue//nuxt-express//node_modules//[email protected]@babel-preset-vue-app//dist//index.common.js"]}!./node_modules/[email protected]@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

不知道为何, 似乎与postcss有关, 请大神赐教

你可能感兴趣的:(nuxt vue 引入 bulma jquery)