阅读 703
用 NuxtJS 构建 SSR 商城 实战笔记 —— 使用 element-ui 及 Sass

用 NuxtJS 构建 SSR 商城 实战笔记 —— 使用 element-ui 及 Sass

这是我参与8月更文挑战的第7天,活动详情查看:8月更文挑战

本篇主要介绍基于 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)
复制代码
  1. 在 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']
},
复制代码

感谢.gif
点赞.png

文章分类
前端
文章标签