AI专业者开发社区 1 号成员
  •  0 回帖  •  6 浏览  •  4 个月前
   

Blazor中的CSS隔离

1. 环境

VS 2019 16.9.0 Preview 1.0

.NET SDK 5.0.100

2. 前言

CSS 一旦生效，就会应用于全局，所以很容易出现冲突。为了解决这个问题 CSS 隔离就顺势而生。Blazor 诞生于 2018 年，至今为止已经 2 年多了，然而 CSS 隔离直至.NET 5出现才支持。

3.Razor 组件间隔离

Razor 组件间 CSS 隔离应当是使用最为简单，也是使用最为方便的一种 CSS 隔离方式。实现 Razor 组件间 CSS 隔离非常简单，只需要在组件所在的目录下建立同名的“.razor.css”文件即可——若文件夹 A 下存在名为“Component.razor”的组件，则只需要在文件夹 A 下建立“Component.razor.css”，即可实现为“Component.razor”组件设置单独的样式而不影响其他组件。

以默认模板为例，新建“Index.razor.css”，其内容如下：

h1 {
    font-size: 48px;
    font-weight: bold;
}

新建“Counter.razor.css”，其内容如下：

h1 {
    font-size: 16px;
    font-weight: 400;
}

其效果如下：

Razor组件间css隔离.min

上面的组件 CSS 文件将会被生成为“项目名.styles.css”的文件，在.NET 5 中会被默认添加到“index.html”中，如上两个 CSS 文件会被编译为如下结果：

/* /Pages/Counter.razor.rz.scp.css */
h1[b-g5zg69lne1] {
    font-size: 16px;
    font-weight: 400;
}
/* /Pages/Index.razor.rz.scp.css */
h1[b-f3rb2cn7la] {
    font-size: 48px;
    font-weight: bold;
}

在浏览器中查看 DOM 元素，其结果如下：

<h1 b-f3rb2cn7la>Hello, world!</h1>

<h1 b-g5zg69lne1>Counter</h1>

也就是说，这两个组件内的 DOM 被添加上了一个以“b-”开头加 10 个随机字符的属性，这似乎与 Angular 相似（本人没有用过，只是在浏览器中见到过类似的东西）。Blazor 中的 CSS 隔离，似乎是通过随机属性名来实现的。那么，通过 id 和 class 生成 styles.css 是什么样的呢？其同样是通过随机属性名来实现的。例如，下面一段组件 CSS 文件，

#zxyao-a {
    font-size: 48px;
    font-weight: bold;
}

#zxyao-b {
font-size: 24px;
font-weight: bold;
background-color: #ff0000;
padding: 16px;
}


.zxyao-cls {
font-size: 24px;
font-weight: bold;
background-color: #000;
color: #fff;
padding: 16px;
}

其会被编译成如下结果：

/* /Pages/Index.razor.rz.scp.css */
#zxyao-a[b-f3rb2cn7la] {
    font-size: 48px;
    font-weight: bold;
}

#zxyao-b[b-f3rb2cn7la] {
font-size: 24px;
font-weight: bold;
background-color: #ff0000;
padding: 16px;
}


.zxyao-cls[b-f3rb2cn7la] {
font-size: 24px;
font-weight: bold;
background-color: #000;
color: #fff;
padding: 16px;
}

其结果如下：

Razor组件间css隔离2.min

也就是说，无论组件 CSS 文件汇总如何写，其都会转化为CSS 选择器 [随机属性]的形式。

4.CSS 隔离的子组件支持

默认情况下，组件 CSS 仅仅只会应用都当前组件。例如，有以下两个组件：

/* Index.razor */
<div class="my-text">
    Welcome to your new app.
    <CssIsolation.Components.Child />
</div>

/* Components/Child.razor */
<h1>Child</h1>
<div class="my-text">
这是子组件
</div>

如果在”Index.razor.css“中样式如下，

.my-text {
    border:2px solid #000;
    padding: 16px;
}

那么其仅仅只对”Index.razor“起作用——border 出现在最外层 Index 组件上。

子组件支持1.min

如果想让其对本组件及其子组件”.my-text“元素起作用，可以使用”::deep“进行标记：

::deep .my-text {
    border:2px solid #000;
    padding: 16px;
}

子组件支持2.min

是不是发现，本组件的“.my-text”的 border 没了。如前面所讲，在这里，::deep将会被随机属性所替代，也就是说，其编译结果如下：

/* /Pages/Index.razor.rz.scp.css */
[b-f3rb2cn7la] .my-text {
    border:2px solid #000;
    padding: 16px;
}

其中，b-f3rb2cn7la 是指本组件根元素，如图所示。

子组件支持3.min

如果本组间没有唯一的父元素标签，则本组间中的每一个原生的 HTML 标签都会有相同的随机属性，例如下面这个组件，其“div”与“h1”都会具有相同的随机属性，并会用改属性替代“::deep”标识。“Child“组件中的元素将不会出现改随机属性。

<div class="my-text">
    Welcome to your new app.
</div>
<h1>
    Welcome to your new app.
</h1>
<CssIsolation.Components.Child />

一些组件库会提供”Template“之类的组件，例如Ant Design Blazor，如果使用组件包裹所有的元素，如：

<AntDesign.Template>
    <div class="my-text">
        Welcome to your new app.
        <CssIsolation.Components.Child />
    </div>
</AntDesign.Template>

则 Blazor 会忽略外层的组件，直至在本组间内找到第一个原生的 html 元素为止，然后为该层所有原生的 html 元素添加上随机属性。

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

5.CSS 预处理器的支持

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

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

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

SCSS编译1.min

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

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

SCSS编译2.min

并写入如下命令。

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

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

  1. 添加 bat 文件到 Task Runner

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

SCSS编译3.min

  1. 绑定运行任务

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

SCSS编译4.min

启用任务运行程序后，会在解决方案目录下生成”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 {
       <span class="hljs-selector-class">.my-text</span> {
        <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#ff0000</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#000</span>;
        <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
    }
}



}


/* 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编译5.min

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

// 一些 SCSS 样式代码
...

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


// 一些 SCSS 样式代码
...

6. 修改随机属性标识

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