Shulou(Shulou.com)06/02 Report--

Editor to share with you how the overall introduction of vue scss, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

1. Mixin.scss// color definition specification $color-background: # FFFFFF;$color-background-d: rgba (0,0,0,0.3); $color-highlight-background: # 333; rgba: # 666; rgba: # ffcd32;$color-theme-d (255,205,49,0.5); $color-sub-theme: # d93f30: colortext: rgba (255,255,255,0.3) $color-text-l: rgba (255,255,255,0.5); $color-text-ll: rgba (255,255,255,0.8); $font-gray: # 999bombard / font definition specification $font-size-small-s: 10pxterac: font definition specification $font-size-small-s: 10pxmith; fontAfter: 12pxterac: 14pxThere: 16pxBrit; FontLay: large: 18pxbot; FontLinesizeLlav: 22pxbot: font sizeLameweight: 600t bodyj html {/ / background: rgb (239,242,249) } / / background image 100%@mixin bkgMaxSize ($url) {background-image: url ($url); background-repeat: no-repeat; background-size: 100% 100%;} @ mixin font-setting-group ($font-size,$font-family,$font-weight,$color,$line-height) {font-size: $font-size; font-family: $font-family; font-weight: $font-weight; color: $color; line-height: $line-height } / / Border fillet @ mixin borderRadius ($radius) {- webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;-o-border-radius: $radius; border-radius: $radius;} / / Center left and right @ mixin positionCenter {position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%);} / / position up and down @ mixin ct {position: absolute Top: 50%; transform: translateY (- 50%);} / position left and right @ mixin cl {position: absolute; left: 50%; transform: translateX (- 50%);} / / position full screen @ mixin allcover {position: absolute; top: 0; right: 0;} / / relative positioning @ mixin my-absolute ($left, $top,$z) {position: absolute; z-index: $z; margin-left: $left; margin-top: $top } / / width and height-different @ mixin widthHeightN ($width, $height) {width: $width; height: $height;} / / same @ mixin widthHeightY ($number) {width: $number; height: $number;} / / font size, color @ mixin sizeColor ($size, $color) {font-size: $size; color: $color;} / / flex layout @ mixin center_none {display: flex; justify-content: center; align-items: center;} @ mixin center_center {display: flex Justify-content: center; align-items: center;} @ mixin flex-start_center {display: flex; justify-content: flex-start; align-items: center;} @ mixin space-between_center {display: flex; justify-content: space-between; align-items: center;} @ mixin space-around_center {display: flex; justify-content: space-around; align-items: center;} @ mixin flex-end_center {display: flex; justify-content: flex-end Align-items: center;} @ mixin wrap_flex-start {display: flex; flex-wrap:wrap; align-content:flex-start;} @ mixin flex-start_column {display: flex; justify-content: flex-start; flex-direction: column;} @ mixin none_center_column {display: flex; align-items: center; flex-direction: column;} @ mixin center_center_column {display: flex; align-items: center; justify-content: flex-start; flex-direction: column }

This file is the globally encapsulated scss

2. Use of a single file

3. Global mount 3.1 Import dependent npm install sass-resources-loader

Add configuration:

Add the following code to the vue.config.js file

Module.exports = {outputDir: 'mbb',/* output directory * / publicPath:' /', / * access prefix * / lintOnSave: false / / turn off Eslint detection chainWebpack: config = > {const oneOfsMap = config.module.rule ('scss') .oneOfs.store oneOfsMap.forEach (item = > {item .use (' sass-resources-loader') .loader ('sass-resources-loader') .options ({/ / Provide path to the file with resources / / the path of the scss to be shared) Resources: 'src/assets/stylus/mixin.scss'}) .end ()})}

In the chainWebpack block

3.2 restart the project

The above is all the content of the article "how to introduce scss into vue globally". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.