Style
CSS Modules
There are two main issues of the style development:
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
TIP
With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
Project Structure
All global styles are set in the /resources/js/styles
directory.
├── styles
│ ├── btn.scss # button css
│ ├── element-ui.scss # global custom element-ui style
│ ├── element-variables.scss # global variables for customizing element-ui style
│ ├── index.scss # global common style - to sync with vendor (vue-element-admin project)
│ ├── laravue.scss # custom common style will be put here
│ ├── mixin.scss # global sass mixin
│ ├── sidebar.scss # sidebar css
│ ├── transition.scss # vue transition animation
│ └── variables.scss # global variables
Same as Vue components workflow, global styles are written in /resources/js/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
}
Postcss
Let's talk about the configuration of postcss. After the new version of the vue-cli webpack template initialization, there is a default .postcssrc.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.
//.postcssrc.js
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"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 browsernot 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.