本篇主要介绍基于 NuxtJS 构建的 vue 后端渲染（SSR）项目中对于 ui 框架 ElementUI 和 CSS 扩展语言 Sass 的使用方面的介绍。有不足之处或是任何意见建议，欢迎各位大佬不吝斧正~

使用 element-ui

因为之前创建项目时选择了安装 element-ui，所以可以直接使用，如果想更新到最新的版本可以先卸载再安装：

1. npm uninstall element-ui
2. npm i element-ui

如果创建项目时没有选择安装，则需：

1. 在 plugins 目录下创建 element-ui.js 配置文件

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

2. 在 nuxt.config.js 做如下配置：

// 引入 css
css: [
  'element-ui/lib/theme-chalk/index.css' 
],
// 引入插件配置
plugins: [
  '@/plugins/element-ui'
],
// 单独打包
build: {
  transpile: [/^element-ui/]
}

现在我们就可以开始在项目中使用 element-ui 的组件了。但是，我们的项目一般都有自己的主题色等自定义的主题配置，比如本项目的主题色就是 #FF3939 的红色，而 element-ui 默认的主题色是蓝色的，要如何修改呢？我将在下文中进行介绍：

在项目中改变 SCSS 变量

Element 的主题的样式都是使用 SCSS（我一般称为 Sass）编写的，本项目也使用了 Sass（如何使用 Sass，本篇的第二部分内容将会进行介绍），所以可以直接在项目中改变 Element 的样式变量。按照官方文档的说明，在 assets/scss 目录下新建 element-variables.scss 文件并进行配置：

/* 改变主题色变量 */
$--color-primary: #FF3939;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

然后在 nuxt.config.js 进行配置：

css: [
  '@/assets/scss/element-variables.scss'
],

是的，你没有看错，虽然是 .scss 文件，但依旧是写在 css 这个配置项里，而不是写在 styleResources: { scss: [] } 里，不然会报错。

注意：这时候编译会报警告 'Using / for division is deprecated and will be removed in Dart Sass 2.0.0. '，解决方法是改变 sass 的版本："sass": "~1.32.13"。在 github 上可以看见关于此问题的 issue。

使用 Sass

想要使用 Sass 首先需要安装 3 个依赖：npm install --save-dev sass sass-loader@10 fibers，这里安装 fibers 后，按照官方文档的意思是能够提升编译速度：

Synchronous compilation with sass (2x speed increase) is enabled automatically when fibers is installed.

安装完后，只要在 style 标签 里增加 lang="scss"，无需任何其它配置，就可以直接在页面中使用 Sass 了：

<style lang="scss" scoped>
// 直接书写 Sass
</style>

如果要用 Sass 设置一些全局的样式，比如定义主题色变量之类的，则可以在 assets 目录下新建 scss 文件夹，里面定义一个 global.scss 文件：

// 主题色
$--color-primary: #FF3939;

// 自定义
.c_primary {
  color: $--color-primary;
}

然后想让 global.scss 生效则需要：

1. 安装 @nuxtjs/style-resources， npm i -D @nuxtjs/style-resources，按之前初始化项目时的选项，项目中已经安装好了。
2. 在 nuxt.config.js 中配置：

buildModules: [
    '@nuxtjs/style-resources', // 项目初始化时也默认配置好了
  ],
styleResources: {
  scss: ['~/assets/scss/global.scss']
},