# Style

# CSS Modules

In the code of stylIn the style development process, there are two issues are more prominent:

• Global pollution —— The selector in the CSS file is global. The same name selector in different files, according to the order in the build generation file, the styles generated later will overwrite the previous ones.

• Selector complex —— In order to avoid the above problems, we have to be careful when writing styles, the name of the class will be marked with a range of restrictions, multi-person development is also very easy to lead to the chaos of the naming style. The classnames getting longer and longer. Eventually, it's hard to maintain.

Fortunately vue provides us with scoped can easily solve the above problem. As the name suggests, it adds a scoped concept to css.

/* Compile before */
.example {
  color: red;
}

/* Compile after */
.example[_v-f3f3eg9] {
  color: red;
}

If you add <style scoped> the css will only effect in the current component。For detailed documentation, see vue-loader

# Project Structure

vue-element-admin All global styles are set in the @/src/styles directory.

├── styles
│   ├── btn.scss                 # button css
│   ├── element-ui.scss          # global custom element-ui style
│   ├── index.scss               # global common style
│   ├── mixin.scss               # global sass mixin
│   ├── sidebar.scss             # sidebar css
│   ├── transition.scss          # vue transition animation
│   └── variables.scss           # global variables

The common workflow is that the global styles are written in the src/styles directory and each page's own style is written in its own .vue file.

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

# Custom element-ui style

Now let's talk about how to override the element-ui style. Because element-ui style we are import in the global, so you can't add scoped to a page if you want to overwrite it, but you want to override only the element style of this page, you can add a class in its parent, using the namespace to solve this problem.

.article-page {
  /* you namespace*/
  .el-tag {
    /* element-ui element tag*/
    margin-right: 0px;
  }
}

Of course, you can also use the deep selectors as described below.

# Deep Selectors

Parent component changes child component style.

If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:

<style scoped>
.a >>> .b { /* ... */ }
</style>

Will be compiled into

.a[data-v-f3f3eg9] .b {
  /* ... */
}

Some pre-processors, such as SASS, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.

.xxx-container >>> .el-button{
  xxxx
}

Official document

# Postcss

Let's talk about the configuration of postcss. After the new version of the vue-cli webpack template initialization, there is a default postcss.config.js in the root directory. By default, vue-loader will read the configuration of postcss from it, so here directly to change the configuration file on it. The configuration is the same as postcss.

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

// package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

As described in the previous code, autoprefixer reads the configuration parameters of browserslist under package.json.

• > 1% Compatible with browser with global usage above 1%
• last 2 versions Compatible with the last two versions of each browser
• not ie <= 8 Not compatible ie8 and below

More detail browserslist

postcss has many other features to explore by yourself

# Mixin

This project does not set to automatically inject sass mixin to the global, so you need to manually introduce the mixin.

<style rel="stylesheet/scss" lang="scss">
  @import "src/styles/mixin.scss";
</style>

If you need to automatically inject mixin global, you can use sass-resources-loader.