Blazor中的CSS隔离问题

因此，当本组件的根元素与子组件需要设置样式的元素CSS选择器相同时，如果想要隔离样式在本组件与子组件都生效，有两种方式：一是为本组间和子组件同时写CSS样式，二是再用一个元素包裹所有的组件和元素，即换个根元素。

5.CSS预处理器的支持

很多时候，我们可能会使用SCSS或LESS来编写样式文件，Blazor原生并不支持这些预处理器，我们可以使用任务运行程序资源管理器来在项目生成前编译SCSS或LESS，或者是使用一些第三方的库来支持，比如微软官方所提到的Delegate.SassBuilder。我试用了下Delegate.SassBuilder，可能由于我的使用方式不对，CSS文件的生成貌似是晚于项目生成的，无法在第一次生成程序时对CSS文件进行编译，接下来我将分享另外一种方式，即使用”任务运行程序资源管理器“。

这里我简单使用了下”node-sass“，直接通过命令行编译，并未使用Gulp或Webpack之类的高级工具，解决方案步骤如下（node-sass的安装这里就不再讲了）：

下载并按照扩展”Command Task Runner“

编写SCSS文件编译命令行程序”scss.bat“

在项目的根目录下新建scss.bat文件：

并写入如下命令。

node-sass -r ./ -o ./ --source-map true --source-map-contents sass --output-style compressed

该命令将会编译SCSS文件，并生成压缩后的CSS文件和相应的source map文件。

添加bat文件到Task Runner

在scss.bat文件上右键，选择”Add to Task Runner“选项。

绑定运行任务

打开视图|其他窗口|任务运行程序资源管理器，在找到scss命令，然后右键，选择绑定|生成前，绑定后可在右侧绑定窗口下生成前下看到该命令。

启用任务运行程序后，会在解决方案目录下生成”commands.json“文件，我的此文件内容如下，”-vs-binding“选项表明了任务绑定的运行时间的位置。

{ "commands": { "scss": { "fileName": "cmd.exe", "workingDirectory": ".", "arguments": "/c scss.bat" } }, "-vs-binding": { "BeforeBuild": [ "scss" ] } }

接下来，只需要直接运行程序，即可以看下效果。

当然在SCSS中，我们也可以使用”::deep“标记，其也能正确的显示，例如：

/* Pages/Index.razor.scss */ .my-text { border: 2px solid #000; padding: 16px; ::deep { .my-text { border: 2px solid #ff0000; background-color: #000; color: #fff; } } } /* Components/Child.razor.scss */ h1 { background-color: #efefef; font-weight: 700; }

对应的Razor组件如下：

/* Pages/Index.razor */ @page "/" <div class="my-text"> Welcome to your new app. <CssIsolation.Components.Child /> </div> /* Components/Child.razor */ <h1>Child</h1> <div class="my-text"> 这是子组件 </div>

其运行效果如下：

但是，个人感觉，在SCSS中使用”::deep“标记可能会有点混乱，建议要么不使用”::deep“标记，要么将”::deep“标记放在最外层，即如下的形式。

// 一些SCSS样式代码 ... ::deep { // 子组件的一些SCSS样式代码 ... } // 一些SCSS样式代码 ...

6.修改随机属性标识

前面有提到，Blazor默认生成随机属性名的形式是以“b-”开头加10个随机字符，在微软的官方文档中显示这个是可以更改的。这对于自家的应用来说，是比较友好的，比如小米可以定义随机属性形式是以”mi“开头，淘宝可以定义随机属性形式是以”tb“开头等等。但是，此功能似乎还存在有问题，有人已经在Github提出了issue——Custom CSS Scope Identifier not working，希望Blazor能够越来与完善。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!