时间戳

首页 > 解决方案 > 用 sass 限制第三方 css 的范围

css - 用 sass 限制第三方 css 的范围

问题描述

我需要在旧应用程序中显示 SPA（不允许 iframe）。SPA 应用程序使用第三方 css。不幸的是，第三方 css 正在干扰遗留应用程序的样式，我需要以某种方式限制它的范围。我想在 SPA 中做这样的事情：

<div class="use-third-party-css">
    <!-- SPA -->
</div>

为了能够做到这一点，我创建了一个 scss 文件：

.use-third-party-css { 
     @import "../node_modules/third-party/dist/default";
}

目前它工作正常，但它警告我导入 css 的功能已被弃用，很快将被删除。有没有办法更容易和/或没有警告地实现这种“范围界定”？ 编辑： 还有一个 scss 版本，我可以这样做：

.use-third-party-css { 
     @import "../node_modules/third-party/src/default.scss";
}

但由于以下“意外”行为，它对我不起作用。以下文件：

@mixin testMixin() {
    &-a > &-b {
       color: black;
   }
}

.c {
   @include testMixin();
}

会改成

.use-third-party-css .c-a > .use-third-party-css .c-b {
    color: black; 
}

标签： csssass

解决方案

推荐阅读