要在Nuxt.js项目中使用SASS我们需要安装三个依赖库：node-sass、sass-loader和@nuxtjs/style-resources，安装方法如下：
$ npm install sass-loader node-sass @nuxtjs/style-resources --save-dev
库说明：
- sass-loader：webpack的一个loader
- node-sass：用于把scss文件编译成css文件
- @nuxtjs/style-resources ：Nuxt提供的负责加载样式资源的模块，要想实现全局引用SASS变量、mixin就得靠它。
安装完依赖库后我们在assets/scss目录下新建一个main.scss文件，它主要用于引入其他的*.scss文件，如SASS变量文件、布局文件、函数文件等，主要作为样式的入口文件，文件结构如下:
$ tree assets
assets
├── css
│ ├── feather.css
│ └── reset.css
├── fonts
│ ├── Feather
│ │ ├── Feather.ttf
│ │ └── Feather.woff
└── scss
├── _app.fonts.scss
├── _app.layout.scss
├── _app.mixins.scss
├── _app.variables.scss
├── main.scss
assets/scss/main.scss文件内容如下：
@import 'app.fonts';
@import 'app.variables';
@import 'app.mixins';
@import 'app.layout';
然后我们将SASS入口文件、全局变量、全局函数文件的路径配置到nuxt.config.js文件中，框架会自动编译并将样式文件加入到<style>标签中，示例：
//配置入口文件
css: [
'@/assets/scss/main.scss'
]
// 配置style-resources模块儿
modules: ['@nuxtjs/style-resources'],
//如下配置全局使用的变量、mixins和函数文件路径
styleResources: {
scss: [
'~/assets/scss/_app.variables.scss',
'~/assets/scss/_app.mixins.scss'
]
}
这样我们就完成了全局引用SASS变量、mixins和函数的配置。