Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用 style插件使用问题 #326

Closed
comxza opened this issue Jul 20, 2021 · 9 comments
Closed

使用 style插件使用问题 #326

comxza opened this issue Jul 20, 2021 · 9 comments
Labels
bug Something isn't working

Comments

@comxza
Copy link

comxza commented Jul 20, 2021

文档中这个style的使用方式,查阅文档暂未找到可行的使用方式
1

问题描述

就是我在使用这个style标签的时候,,我返回的富文本值就包含这些class或者id,比如以下类型
<span class="aa">Hello </span><span id="bb">world!</span>
那么我想对class为aa的或者id为bb的单独设置样式,这个style样式需要写在哪里呢,我在uni-app问答社区有回复,告知写在externStyle或者mp-html/node/node.vue,但是这个如果写在externStyle这个有参考模版之类的吗,我尝试很多个写法都不行,在nvue情况下

@comxza
Copy link
Author

comxza commented Jul 20, 2021

但是我又发现 如果把样式写在mp-html/node/node.vue,这样一来的话,在非app端是生效的,在app端是不生效

@jin-yufeng
Copy link
Owner

style 插件用于解析和匹配传入 html 中的 style 标签,比如这样:

<mp-html content="<style>.aa{color:red}</style><div class='aa'>123</div>" />

如果是固定的内容可以写在 tools/config.jsexternStyle 字段里,然后 构建 组件包:

npm install
npm run build:uni-app

最后拷贝 dist/uni-app 到项目中使用就可以了
添加到 node/node.vue 中是仅在非 app 端生效的,nvueapp 端用 web-view 渲染,需要添加到 static/mp-html/local.html 里,写在 tools/config 中进行构建,会自动添加到需要的地方

@comxza
Copy link
Author

comxza commented Jul 20, 2021

如果我写在externStyle,是直接写.aa{color:red};或者#bb{color:red},还是需要像<style>.aa{color:red}</style>这种写法呢

@jin-yufeng
Copy link
Owner

不需要加 <style></style>,直接写 css 内容即可

@comxza
Copy link
Author

comxza commented Jul 20, 2021

好的,谢谢回复

@comxza
Copy link
Author

comxza commented Jul 25, 2021

我在使用上面方式把css样式写在externStyle,并且编译后放在uniapp对应的目录后运行到h5
/components/mp-html/node/node.vue此文件的style
12
但是实际上的浏览器展示,未识别到我写的class样式
13

然后在app端 uni-app编译模式下的nvue
/static/app-plus/mp-html/local.html此文件的style
134
但是客户端显示的,border-top: 1px solid #ccc;这个class未识别到吗
Screenshot_20210725_205701_com yunxun bbs

@jin-yufeng
Copy link
Owner

h5 因为 这个,确实有问题,我调整一下

@QLLMr
Copy link

QLLMr commented Aug 9, 2021

您好,tools/config.js 的 externStyle 字段里,例子: externStyle: '.aaa_bbb{ color: red;}' 构建完成后下划线后面的bbb会被过滤掉,变成了.aaa_{color:red},这样正常吗?

@jin-yufeng
Copy link
Owner

您好,tools/config.js 的 externStyle 字段里,例子: externStyle: '.aaa_bbb{ color: red;}' 构建完成后下划线后面的bbb会被过滤掉,变成了.aaa_{color:red},这样正常吗?

不正常,我修复一下

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants