CSS 配置
如果要使用 sass 就必须要安装 node-sass和sass-loader 。
npm install --save-dev node-sass sass-loader
在 nuxt.conf.js中,添加要使用的 CSS 资源:
Type: Array
Items: string
module.exports = {
css: [
// 直接加载一个 Node.js 模块。(在这里它是一个 Sass 文件)
'bulma',
// 项目里要用的 CSS 文件
'@/assets/css/main.css',
// 项目里要使用的 SCSS 文件
'@/assets/css/main.scss'
]
}
loading 属性配置
在页面切换的时候,Nuxt.js 使用内置的加载组件显示加载进度条。你可以定制它的样式,禁用或者创建自己的加载组件。
在你的组件中你可以使用this.$nuxt.$loading.start()
来启动加载条。使用this.
n
u
x
t
.
nuxt.
nuxt.loading.finish()来使加载条结束。
export default {
mounted () {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(() => this.$nuxt.$loading.finish(), 500)
})
}
}
如果要在mounted方法中启动它,请确保使用this. n e x t T i c k 来 调 用 它 , 因 为 nextTick来调用它,因为 nextTick来调用它,因为loading可能无法立即使用。
您可以通过检测process.server这个变量来控制插件中的某些脚本库只在服务端使用。当值为 true 表示是当前执行环境为服务器中。 此外,可以通过检查process.static是否为true来判断应用是否通过nuxt generator生成。您也可以组合process.server和process.static这两个选项,确定当前状态为服务器端渲染且使用nuxt generate命令运行。