uni-app中使用scss

末蓝、 2022-01-26 01:23 1070阅读 0赞

# 项目总结—scss篇 #

### 1.配置 ###

#### 1.1 vue ####

#### 1.2 react ####

#### 1.3 uniapp ####

### 2. 引入scss ###

先将所有scss合并到index.scss中

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

在main.js中引入即可

import "../index.scss"

### 3. 全局配置-global ###

有两个scss比较特殊，一个是global，一个是mixin。我们分别来讲一下

#### 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 引入方式 ####

*  直接引入  
    `@important "@/styles/global.scss"`
 *  要添加依赖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 如何使用 ####

直接在css样式中直接引入变量即可

### 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 引入方式 ####

*  直接引入  
    `@important "@/styles/mixin.scss"`
 *  要添加依赖sass-resources-loader

#### 4.3 如何使用 ####

[scss官方文档][scss]

[scss]: https://www.sass.hk/guide/