项目总结—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

// 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 如何使用

scss官方文档