use uni-app scss

Project Summary -scss articles

1. Configuration

1.1 view

1.2 react

1.3 uniapp

2. Introduction scss

First of all scss incorporated into index.scss

@import "../base.scss"
@import "../form.scss"

In the introduction to the main.js

import "../index.scss"

Configuring global -global

There are two scss rather special, is a global, it is a mixin. We are speaking about the

3.1 global.scss

//颜色
$g-primary:#409eff;
$g-success:#67c23a;
$g-warning:#e6a23c;
$g-danger:#f56c6c;
$g-info:#909399;

//大小
$g-font-size-base: 18px;
$g-font-size-large: 20px;
$g-font-size-medium: 16px;
$g-font-size-small: 14px;

3.2 Entry Mode

• Direct introduction
  @important "@/styles/global.scss"
• To add a dependent sass-resources-loader

// vue.config.js
module.exports = {
  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（这里是你.scss文件所在路径）
          resources: './path/to/resources.scss',
 
          // Or array of paths（这个可以删掉）
          resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}

3.3 How to use

Direct variable can be directly introduced in css styles

4. mixin

4.1 mixin.scss

@mixin flex($direction:row,$jc:initial,$ai:initial){
 display:flex;
 flex-direction: column;
 justify-content: $jc;
 align-items:$ai;
}

4.2 Entry Mode

• Direct introduction
  @important "@/styles/mixin.scss"
• To add a dependent sass-resources-loader

// vue.config.js
module.exports = {
  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（这里是你.scss文件所在路径）
          resources: './path/to/resources.scss',
 
          // Or array of paths（这个可以删掉）
          resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}

4.3 How to use

scss official documents