uniapp为page设置背景色不生效 & lang=“scss“ scoped的page样式失效,uniapp重复打开页面

文章讨论了uniapp在不同平台下,使用scoped的page选择器样式失效的问题及解决方案,即为page选择器单独设置无scoped的style。同时,针对app启动时因未登录导致的多页面跳转问题,提出了使用uni.redirectTo代替uni.navigateTo来避免页面堆积。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、lang="scss" scoped中的page选择器的样式失效

在用uniapp生成网页和H5时有效,但生成小程序或者app时无效。这是因为page选择器在小程序和app编译中是页面的父节点,所以加上scoped限定后,会导致无法选中。详细了解请移步源码。

解决办法就是给 page 选择器,单独设置一个 style,去掉scoped就行。

<style lang="scss">
	page {
		background-color: $uni-bg-color-theme;
	}
</style>

<style lang="scss" scoped>
	page {
		// background-color: $uni-bg-color-theme;
	}
    。。。其它样式。。。
</style>

参考文献:

### Webpack 和 Vite 在 Vue 文件 SCSS 模块解析中的行为 当使用 Webpack 或 Vite 构建 Vue 项目时,对于带有 `&lt;style&gt;` 标签的组件文件(如 `.vue`),其内部的样式模块路径生成机制涉及多个层面的技术细节。以下是关于 `./src/views/modules/config/list.vue?vue&amp;type=style&amp;index=0&amp;id=29725dce&amp;lang=scss&amp;scoped=true` 类似路径的具体解释。 --- #### 1. **模块路径的意义** 这种特殊的模块路径是由构建工具自动生成的虚拟模块标识符,用于区分同一文件的不同部分以及不同的作用域规则。具体含义如下: - **`./src/views/modules/config/list.vue`**: 表示当前 Vue 单文件组件的实际物理路径。 - **`?vue&amp;type=style`**: 明确指出这是针对该组件中 `&lt;style&gt;` 部分的内容进行处理。 - **`index=0`**: 表明这是组件内的第一个 `&lt;style&gt;` 块(如果有多个 `&lt;style&gt;` 块则依次编号)。 - **`id=29725dce`**: 自动分配的一个唯一 ID,用于标记该模块实例,在某些情况下可能还与缓存策略有关。 - **`lang=scss`**: 指定所使用的样式语言为 SCSS- **`scoped=true`**: 启用了 CSS Modules 或 Scoped CSS 功能,意味着这些样式仅适用于本组件范围之内[^1]。 --- #### 2. **Webpack 的工作原理** 在 Webpack 中,Vue Loader 负责拆解 `.vue` 文件并分别处理其中的模板、脚本和样式部分。对于 SCSS 样式的解析流程大致可以分为以下几个方面: ##### (a) **Loader Chain** - 使用一系列 loader(例如 sass-loader、css-loader 等)来逐步转换 SCSS 成可执行代码形式。 - 如果启用了 `scoped` 属性,则 css-loader 会进一步将类名替换为唯一的哈希值组合,防止全局污染[^2]。 ##### (b) **Virtual Module Generation** - 上述提到的特殊路径实际上是一个虚拟模块的概念,它并不对应磁盘上的真实文件而是存在于内存之中。 - 此种方式有助于精确控制依赖关系,并允许开发者灵活定制加载器链路的行为模式。 ##### (c) **Example Code Snippet** ```javascript // Example of how loaders might be configured within webpack.config.js module.exports = { module: { rules: [ { test: /\.vue$/, use: [&#39;vue-loader&#39;] }, { test: /\.s(c|a)ss$/, use: [ &#39;vue-style-loader&#39;, &#39;css-loader&#39;, { loader: &#39;sass-loader&#39;, options: { additionalData: `$primary-color: red;`, // Inject global variables into all SCSS files. } } ] } ] } }; ``` --- #### 3. **Vite 的实现差异** 相比传统基于 Node.js 的 Webpack,Vite 利用 ESBuild 提升了初始启动速度并通过原生支持 ESM 实现按需加载效果。然而就 SCSS 解析而言两者核心理念相似之处颇多但也存在些许区别: - **ESBuild Integration:** Vite 默认采用更快捷高效的 esbuild 工具来进行基础语法转译任务(不包括复杂特性),而高级功能依旧交由 postcss/sass 等专门库完成[^4]. - **Hot Module Replacement(HMR):** 更加智能化 HMR 方案使得每次更改都能迅速反馈至浏览器端展示最新状态. - **Code Sample Illustration:** ```javascript export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: &#39;@import &quot;@/styles/_variables.scss&quot;;&#39; } } } }); ``` 以上片段展示了如何向每一个 SCSS 文件动态注入变量定义或其他公共资源链接的方法之一。 --- #### 4. **总结比较** 无论是 Webpack 还是 Vite ,它们都在努力追求高效稳定的同时兼顾灵活性满足各类场景需求 。虽然表面上看二者生成的模块路径格式相近但实际上背后运作机理各有千秋值得深入探究学习掌握最佳实践方案以适应不断演进变化的技术潮流趋势发展需要[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值