“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Written in the beginning

From our previous ElementUI source code analysis series – Building a project from scratch, and learning the process of preparing, packaging, and testing a project, we have built the basic framework of the project, as shown below. Each folder has its own role and clear division of work.

In this chapter we’ll take a look at how styles are used in ElementUI, starting with a wave of analysis:

  • To observe theelement-uiSource,package.jsonFile, you can see that it’s using thescssPre-processing language;
  • In its source codepackages/theme-chalk/srcPath, we can also find that each component has a corresponding.scssFile;
  • .scssThe file must eventually become.cssThe file is browser-specific, but how does it translate? frompackage.jsonThe file can be known as it is usedgulpTo do the conversion, inpackages/theme-chalk/srcThere are also configuration files for it in the directory. (ongulpYou can learn it by yourself and write some functions with it later.

(To facilitate learning, you can download a copy of the element-UI source code to compare learning locally, the effect will be better.)

Write component styles using the SCSS preprocessor

After the above analysis, let’s first try styling the component using.scss, and then gradually transform it as well. First, let’s change our component code and add a class name to the Button component.

// button.vue <template> <button class="el-button"> I am a normal button </button> </template> <script> export default {name: 'ElButton' }; </script>Copy the code

Second, we also create the same style file for the Button component in the same directory as ElementUI.

And write a simple style for it, just give it a background color, can see the effect, then use some SCSS syntax to write style:

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

Finally, we introduce the packages needed to process.scss. There are four packages in total: NPM install [email protected] [email protected] [email protected] [email protected] -d

A brief introduction to the functions of the four packages:

  • Gulp: An automated build tool, and the familiarwebpackIt’s similar, but it’s a little bit purer. It’s based onNodeThe ability of streams to build task flows, in some ways has a performance advantage, and we’ll take it to work.scssFile.
  • Gulp-autoprefixer: gulp-autoprefixer is used for auto-completionCSSPrefix plugin.
  • Gulp-cssmin: Used for compressionCSS.
  • Gulp – sass: compilingscss, toCSS.

Sass and SCSS are the same thing. Sass and SCSS are the same thing. They are called sass. SCSS is a CSS-like syntax that is closer to CSS, friendlier and more readable.

Gulp is used to convert SCSS to CSS, completion, and compression

After writing the button.scss style file, the first step to making it work is to convert it to.css. To start the SCSS transformation, we will create a gulpfile.js file in the Packages/Theme-chalk path.

Write gulp code, code is not much, gulp plugin use the basic syntax, should not be difficult.

// 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(sas.sync ()) // Convert to css.pipe (autoprefixer({browsers: [' ie > 9 ', 'the last 2 versions'], cascade: false})) / / completion. Pipe (cssmin ()) / / compression pipe (dest ('. / lib)); } exports.build = series(compile);Copy the code

After writing the configuration file, as usual, we configure a command for the conversion operation to facilitate later operations.

"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"
},
Copy the code

We now have three action commands in our project’s package.json file. Remember what they do.

Then we execute the command: NPM run build:theme.

You should see a lib folder with.css files generated, which will complete the.scss file conversion to.css, and will automatically complete the CSS prefix and compress the CSS (completion, you can try using some compatible styles, I won’t go into details here).

Use cp- CLI to move CSS files

Once you’ve generated your CSS file, is that it? How do you use it? This brings us back to how we normally use ElementUI style files.

I took a screenshot from the official website, and you can see the styles introduced in the element UI folder, and it refers to an index. CSS. We can look at the corresponding.scss file first:

This should be a master entry style file that imports style files for all components. Create a general style file called index. SCSS:

It’s also simple. We only have one component now, so there’s only one line:

// index.scss
@import "./button.scss";
Copy the code

Then you can run the same command again: NPM run build:theme.

As you can see, the index.css is finished.

According to the path introduced on the official website above, all we need to do is move all the style files to the lib folder in the root directory and we are done.

This operation is borrowed from a package: NPM install [email protected] -d.

After downloading the cp-cli package, let’s change the theme:build command:

"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"
},
Copy the code

Then execute the command, view the root directory lib folder, and magical things happen, right? (≧ω≦) (Well, that’s not amazing)

Test the component’s style file

Now that we’ve done all that, we’ve come to the final step, the testing phase, so how do we test the styles we’ve written?

In the last article in the ElementUI source code Analysis series – Building a project from scratch, preparing a project, packaging it, and testing the process we ended up with two testing methods. Here we use the first method to test the style of a component by packaging the project into a local NPM package.

Test details process can go to see an article, not much introduction, in general, is to type command:

NPM run build NPM pack Test project: NPM install Install NPM run serve NPM run build NPM pack test project: NPM install install NPM run serve

Then introduce styles in main.js:

import juejinElementUI from 'juejin-element-ui'; import 'juejin-element-ui/lib/theme-chalk/index.css'; Use (juejinElementUI);Copy the code

Finally, put a picture:

Styling button components with SCSS

Let’s spruce up our ugly button component a bit, using the original SYNTAX of SCSS. Of course, if you’re familiar with SCSS, you can skip it. It’s not the point.

Below we will create some files as shown in the red box below. This is the same directory as ElementUI, and it has a reasonable division of directories and files, which is worth referring to.

We modify the button.scSS style file:

// 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;
}
Copy the code

Var.scss is the theme definition for the entire project:

// 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;Copy the code

Minxins.scss is a repository of blends with the same properties, such as the operation we use below to add an el- to each class name.

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

Function. SCSS is to store some SCSS functions, familiar with SCSS should be more understanding.

// function.scss
@import "config";
Copy the code

Config. SCSS defines some variables, including the project identifier EL, as well as the specification BEM for writing styles.

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

Finally, we’ll show you one more image:




Content of the past

  • ElementUI source code series 1 – Building project architecture from scratch, project preparation, project packaging, project testing process
  • ElementUI source code series 2 – introducing SCSS, using GULp to convert SCSS to CSS and complete and compress, using CP – CLI to move directories and files
  • ElementUI source code series 3 – Learn the gen-cssfile.js file for automatically creating component. SCSS files and generating the contents of index.scss files
  • ElementUI source code series 4 – Learn how to automatically create component directory structure and generate components. Json file contents in new.js
  • ElementUI source code series 5 – Learn the contents of the build-entry.js file that automatically generates the master entry file index.js




At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.