因为官方的文档API还是有点内容的，再加上网上文章一大抄，所以从官网API中搬运过来
可以直接看文档原文：文档地址
styleResources
- 类型: Object
- 默认: {}
当您需要在页面中注入一些变量和mixin而不必每次都导入它们时，这非常有用。
Nuxt.js 使用 https://github.com/nuxt-community/style-resources-module 来实现这种行为。
您需要为css预处理器指定要包含的 模式 / 路径 ： less, sass, scss 或 stylus
⚠️您不能在此处使用路径别名(~ 和 @
⚠️ You cannot use path aliases here (~ and @)，你需要使用相对或绝对路径。
安装 style-resources：
$ yarn add @nuxtjs/style-resources
根据需要安装：
- SASS: $ yarn add sass-loader node-sass
- LESS: $ yarn add less-loader less
- Stylus: $ yarn add stylus-loader stylus
修改 nuxt.config.js:
export default {
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
scss: './assets/variables.scss',
less: './assets/**/*.less',
// sass: ...
}
}
然后就可以随处直接使用定义过的变量或函数。
