Nuxt配置sass或者less

因为官方的文档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: ...
  }
}

然后就可以随处直接使用定义过的变量或函数。