通过cli方式创建Uni-App项目踩坑日记

最新推荐文章于 2024-09-19 11:26:37 发布

我想叫蜡笔小小新呀

最新推荐文章于 2024-09-19 11:26:37 发布

阅读量1.5k

点赞数 2

分类专栏：前端技术随记文章标签： vue uni-app 小程序

本文链接：https://blog.csdn.net/romantic_love/article/details/118412105

版权

前端技术同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

随记

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在项目中安装和使用Sass及Sass-loader，同时针对uni-ui的配置问题提供了解决方案。重点讲解了在uniapp项目中如何修改uni-ui组件样式，包括使用/deep/规则的技巧和注意事项。

摘要由CSDN通过智能技术生成

1 如何安装使用sass和sass-loader ？

安装sass和node-sass，sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12

安装完成即可使用，无需webpack配置。

2 如何使用uni-ui？

2-1 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件，导致条件编译失效，需要通过配置 vue.config.js 解决：

    // 在根目录创建 vue.config.js 文件，并配置如下

    module.exports = {

      transpileDependencies: ['@dcloudio/uni-ui']

    }

2-2 使用 npm + easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json

    {

      "easycom": {

        "autoscan": true,

        "custom": {

          // uni-ui 规则如下配置

          "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"

        }

      },

      // 其他内容

      pages:[

        // ...

      ]

    }

--from [uni-ui文档]

3 修改uni-ui组件，在自定义组件里，发现无法使用/deep/穿透修改uni-ui组件样式？

1 创建style标签，不使用scoped，在h5可以修改，小程序不生效

2 可以在页面组件的style里，用/deep/穿透，可以生效

如  page.vue是一个页面，
    comp.vue是一个组件且里面使用了uni-ui组件，需要修改uni-ui组件样式

可以在page.vue里的<style></style>里用/deep/穿透uni-ui组件，修改样式即可生效
（目前在comp.vue里则不行，有点奇怪，估计官方还没兼容）

3 通过hbuild创建的uniapp项目可以在自定义组件里，通过/deep/修改uni-ui组件的样式