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
不知道为何， 似乎与postcss有关, 请大神赐教
