写在开头

通过之前的文章《源码系列1——从零开始搭建项目结构》，学习了项目准备、项目打包、项目测试流程，我们已经搭建起了项目的基本框架，如下。 他们的每个文件夹都有自己的职责和分工。 清楚地。

图片.png

在本章中，我们来学习如何使用 中的样式。 我们先来分析一下：

图片.png

图片.png

（为了方便学习，可以下载一份-ui源码在本地对比研究，效果会更好）

使用 scss 预处理器编写组件样式

经过上面的分析，我们首先尝试使用.scss给组件添加一些样式，然后逐步转换。 首先，让我们更改组件代码并向组件添加类名。

// button.vue
<template>
  <button class="el-button">我是一个普通按钮</button>
</template>
<script>
export default {
  name: 'ElButton'
};
</script>

其次，我们还在同一目录下为组件创建相同的样式文件。

图片.png

并为其编写最简单的样式。 只要先给它一个背景色就可以看到效果了。 稍后，您将使用一些 scss 语法来编写样式：

// button.scss
.el-button {
  background-color: red;
}

最后，我们介绍一下处理.scss所需的包。 总共会用到四个包： npm gulp@4.0.0 gulp-@6.0.0 gulp-@0.2.0 gulp-sass@4.0.2 -D

我们简单介绍一下这四个包的功能：

尖端：

Sass 和 scss 实际上是同一个东西。 我们通常称他们为sass。 它们之间的主要区别在于语法。 Sass 使用缩进语法并完全省略花括号； scss 是一种类似 CSS 的语法。 更接近CSS，更友好可读。使用gulp将scss转换为css，完成并压缩

编写完.scss样式文件后，使其生效的第一步是将其转换为.css文件。 现在我们正式开始scss转换工作。 我们首先在 /theme-chalk 路径下创建一个 .js 文件。

图片.png

然后编写gulp代码。 代码不多，就是gulp插件使用的基本语法，应该不难。

// gulpfile.js
const { series, src, dest } = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
function compile() {
  return src('./src/*.scss')
    .pipe(sass.sync()) // 转成CSS
    .pipe(autoprefixer({
      browsers: ['ie > 9', 'last 2 versions'],
      cascade: false
    })) // 补全
    .pipe(cssmin()) // 压缩
    .pipe(dest('./lib')); // 在当前目录下的lib文件夹输出最终文件
}
exports.build = series(compile);

写完配置文件后，我们像往常一样，为这个转换操作配置一个命令，以方便后面的操作。

"scripts": {
  "dev": "webpack-dev-server --config build/webpack.common.js",
  "build": "webpack --config build/webpack.common.js",
  "build:theme": "gulp build --gulpfile packages/theme-chalk/gulpfile.js"
},

现在我们项目的.json文件中出现了三个操作命令。 请记住它们各自的作用！

然后我们执行命令：npm run build:theme。

图片.png

您应该能够看到将生成 lib 文件夹和 .css 文件。 这样就完成了.scss文件到.css文件的转换，并且自动补全CSS前缀并压缩CSS（你可以尝试补全功能，尝试使用一些兼容的样式，这里不再赘述）。

使用 cp-cli 移动 css 文件

生成css文件之后就大功告成了吗？ 如何使用它？ 这就需要我们回过头来思考一下我们平时是如何使用样式文件的。

图片.png

我从官方网站上拍了一张照片。 从图中可以看到，样式是在-ui文件夹下引入的，它引用了一个index.css。 我们可以先找到其对应的.scss文件来看一下。 :

图片.png

这应该是一个通用的入口样式文件，导入所有组件的样式文件。 那么我们就按照示例先创建通用样式文件index.scss：

图片.png

其内容也很简单。 我们现在只有一个组件，所以只有一行：

// index.scss
@import "./button.scss";

然后你可以再次执行之前的命令：npm run build:theme。

图片.png

可以看到生成了index.css。

按照上面官网介绍的路径，我们只需要把所有的样式文件移动到根目录的lib文件夹下就可以了。

图片.png

该操作会借用一个包：npm cp-cli@1.0.2 -D。

下载cp-cli包后，我们更改theme:build命令：

"scripts": {
    "dev": "webpack-dev-server --config build/webpack.common.js",
    "build": "webpack --config build/webpack.common.js",
    "build:theme": "gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk"
},

然后执行命令，观察根目录lib文件夹。 难道有什么神奇的事情发生了吗？ (≧ω≦)（好吧，其实没那么神奇）

图片.png

测试组件的样式文件

做了这么多事情，我们就到了最后一步，测试阶段。 那么如何测试我们写的样式呢？

在之前的文章《源码系列1——从零开始构建项目架构、项目准备、项目打包、项目测试流程》中，我们最后介绍了两种测试方法。 接下来我们使用第一种方法将项目打包成本地npm包来测试组件。 风格。

详细的测试过程大家可以阅读之前的文章，这里就不详细介绍了。 一般来说，只需输入命令：

原始项目：

npm 运行构建：主题

npm 运行构建

npm 包

测试项目：

npm 将 tgz 包的完整路径放置在本地

npm （重新启动项目）

然后引入main.js中的样式：

import juejinElementUI from 'juejin-element-ui';
import 'juejin-element-ui/lib/theme-chalk/index.css'; // 引入样式
Vue.use(juejinElementUI);

最后，这是一个渲染图：

图片.png

使用scss编写样式美化组件

让我们稍微美化一下我们丑陋的组件，并使用 scss 的原始语法。 当然，如果你对scss比较熟悉的话，可以跳过。 这不是重点。

接下来我们将在红框中创建一些文件，如下所示。 这是与 相同的目录。 它的目录和文件划分还是很合理的，值得我们参考和研究。

图片.png

我们转换.scss样式文件：

// button.scss
@import "common/var";
@import "mixins/mixins";
@include b(button) {
  background: $--button-default-background-color;
  color: $--button-default-font-color;
  border-color: $--button-default-border-color;
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 30px;
}

var.scss是整个项目的主题定义：

// var.scss
$--color-white: #FFFFFF !default;
$--button-default-background-color: $--color-white !default;
$--color-text-regular: #606266 !default;
$--button-default-font-color: $--color-text-regular !default;
$--border-color-base: #DCDFE6 !default;
$--button-default-border-color: $--border-color-base !default;

.scss 存储了一些具有相同属性的 ，例如我们下面使用的为每个类名添加 el- 的操作。

// minxins.scss
@import "function";
@mixin b($block) {
  $B: $namespace+'-'+$block !global;
  .#{$B} {
    @content;
  }
}

.scss文件存储了一些scss函数，如果你熟悉scss的话，你应该熟悉这些函数。

// function.scss
@import "config";

.scss定义了一些变量，包括项目标识符el，以及编写样式的规范BEM。 不了解BEM的朋友可以自行学习一下。

// config.scss
$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

最后我们再放一张效果图：

图片.png

往期

至此，这篇文章就结束了，让我们来献花吧。

图片.png

我希望这篇文章对您有所帮助。 如果您有任何疑问，期待您的留言。