如何在Nuxt.js项目中全局引用SASS/SCSS变量、mixins和函数-bootschool.net

在写Nuxt.js+SASS项目时，遇到组件的SASS变量重复定义问题。于是考虑将其放到一个文件中进行统一管理，实现全局访问。那么我们在Nuxt.js项目里边需要如何进行配置呢？方法如下：

要在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和函数的配置。
                    the end
                    nuxt.js
                                        [oh-my-zsh] 提示 Insecure completion-dependent directories detected解决办法
                                        Mac上安装完oh-my-zsh后，命令行终端提示：[oh-my-zsh] Insecure completion-dependent directories detected:
drwxrwxr-x ...