Sass - 给从文件中导入的所有类名添加前缀（使用sass import或webpack loader）

Question

这个问题可能相当愚蠢和重复，但我找不到解决我的问题的有效方法。如果这个问题已经在其他地方得到了解答,我很抱歉。

我想做的是在一个项目中使用两个 CSS 框架。

我必须使用 Semantic 作为我的主要 CSS 框架 - 这必须是全局可访问的。例如，具有 "ui grid" 类的元素应该使用 SemanticUI 的 "ui grid" 行为。

但是，我想使用 Bulma 作为我的次要框架。为了避免冲突，我想给所有 Bulma 类都加上一个静态前缀。因此，例如 Bulma 的 "modal" 类将被命名为 "bulma-modal"。像这样：

  .&bulma {
    @import '~bulma/bulma';
  }

我希望这样做（希望）能够避免所有类冲突，并且仍然让我在同一个范围内使用语义化和Bulma。

感谢任何帮助或建议。

- Matúš Čongrády

Answer 1

这个框架可能会对你有兴趣 https://github.com/Glidias/v-namespace

结合使用sass:meta从node模块中导入样式表，以一种允许它嵌套在选择器层次结构中的方式。

@use "sass:meta";
.bulma {
    @include meta.load-css("../node_modules/bulma/sass/helpers/flexbox.sass");
}

- user2867288

---

这不就相当于执行以下操作吗：.bulma { @import '../node_modules/bulma/sass/helpers/flexbox.sass'; } - Edu Ruiz

Answer 2

.prefix- {
    &btn {

    }
    &nav {

    }
}

.prefix-btn {}
.prefix-nav {}

- vince

---

请参见“完全基于代码的答案解释”。虽然这可能在技术上是正确的，但它并没有解释为什么它可以解决问题或应该被选为答案。我们应该在帮助解决问题的同时进行教育。 - the Tin Man

Answer 3

在你的Bulma SCSS文件中尝试这样做

$my-name: mycss--;

.#{$my-name}btn {
  ...
}

.#{$my-name}input {
  ...
}

.#{$my-name}header {
  ...
}

- masif

---

谢谢你的回答。但是，我显然不能像这样为css框架中使用的所有类都加上前缀。那将是很多工作。 - Matúš Čongrády