uniapp配置scss支持

在开发 uniapp 的时候发现默认 style 是不支持 scss 模式开发样式,这样的话使用 --status-bar-height 就没有办法变成想要的数值了,这时候就需要开启 scss 支持。

  1. HbuilderX 工具 -> 插件安装 找到 scss/sass编译 安装

  2. 在 style 中 添加 lang 属性

    <style lang="scss">
    
     .status_bar {
          height: var(--status-bar-height);
          width: 100%;
      }
    </style>

这样 uniapp 就支持 scss 样式编译了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uni-app中使用SCSS,你需要进行以下步骤: 1. 确保你的uni-app项目已经安装了Node.js和npm。 2. 打开你的uni-app项目的根目录,并在命令行中运行以下命令来安装 `node-sass` 和 `sass-loader`: ```bash npm install node-sass sass-loader --save-dev ``` 3. 上述命令会安装所需的依赖包,并将它们添加到 `package.json` 文件中的 `devDependencies` 中。 4. 在项目的根目录下找到 `vue.config.js` 文件(如果没有则创建一个),并添加以下内容: ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/assets/styles/variables.scss";` } } } }; ``` 在上述代码中,我们使用了 `prependData` 选项来引入一个全局的SCSS文件,可以根据你的项目需求修改引入路径。 5. 在你的uni-app项目的 `src/assets/styles` 目录下创建一个名为 `variables.scss` 的文件,并在其中定义你的SCSS变量和样式。示例代码如下: ```scss $primary-color: #007bff; .button { background-color: $primary-color; color: #fff; } ``` 在上述代码中,我们定义了一个 `$primary-color` 变量,并在 `.button` 类中使用它。 6. 在你的uni-app项目中的组件或页面中,你可以直接引用SCSS文件并使用其中定义的变量和样式。示例代码如下: ```vue <template> <view class="button">This is a button</view> </template> <style lang="scss"> @import "@/assets/styles/variables.scss"; .button { background-color: $primary-color; color: #fff; } </style> ``` 通过以上步骤,你就可以在uni-app中成功安装和使用SCSS了。记得重启你的项目以使改动生效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值