uni-app中使用scss

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

项目总结—scss篇

1.配置

1.1 vue

1.2 react

1.3 uniapp

2. 引入scss

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

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

在main.js中引入即可

  1. import "../index.scss"

3. 全局配置-global

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

3.1 global.scss

  1. //颜色
  2. $g-primary:#409eff;
  3. $g-success:#67c23a;
  4. $g-warning:#e6a23c;
  5. $g-danger:#f56c6c;
  6. $g-info:#909399;
  8. //大小
  9. $g-font-size-base: 18px;
  10. $g-font-size-large: 20px;
  11. $g-font-size-medium: 16px;
  12. $g-font-size-small: 14px;

3.2 引入方式

  • 直接引入
    @important "@/styles/global.scss"

  • 要添加依赖sass-resources-loader

    // vue.config.js
    module.exports = {
    chainWebpack: config => { 

    1. const oneOfsMap = config.module.rule('scss').oneOfs.store
    2. oneOfsMap.forEach(item => { 
    3.   item
    4.     .use('sass-resources-loader')
    5.     .loader('sass-resources-loader')
    6.     .options({ 
    7.       // Provide path to the file with resources（这里是你.scss文件所在路径）
    8.       resources: './path/to/resources.scss',
    10.       // Or array of paths（这个可以删掉）
    11.       resources: ['./path/to/vars.scss', './path/to/mixins.scss']
    12.     })
    13.     .end()
    14. })

    }
    }

3.3 如何使用

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

4. mixin

4.1 mixin.scss

  1. @mixin flex($direction:row,$jc:initial,$ai:initial){ 
  2.  display:flex;
  3.  flex-direction: column;
  4.  justify-content: $jc;
  5.  align-items:$ai;
  6. }

4.2 引入方式

  • 直接引入
    @important "@/styles/mixin.scss"

  • 要添加依赖sass-resources-loader

    // vue.config.js
    module.exports = {
    chainWebpack: config => { 

    1. const oneOfsMap = config.module.rule('scss').oneOfs.store
    2. oneOfsMap.forEach(item => { 
    3.   item
    4.     .use('sass-resources-loader')
    5.     .loader('sass-resources-loader')
    6.     .options({ 
    7.       // Provide path to the file with resources（这里是你.scss文件所在路径）
    8.       resources: './path/to/resources.scss',
    10.       // Or array of paths（这个可以删掉）
    11.       resources: ['./path/to/vars.scss', './path/to/mixins.scss']
    12.     })
    13.     .end()
    14. })

    }
    }

4.3 如何使用

scss官方文档

发表评论

表情：
评论列表 （有 0 条评论，1132人围观）

还没有评论，来说两句吧...

相关阅读