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

Question

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

我要做的是在一个项目中使用2个css框架。

我必须使用语义作为我的主要css框架 - 这必须是全局可访问的。例如，具有类“ui grid”的元素应该使用semanticUI的“ui grid”行为。

但是，我想使用Bulma作为我的辅助框架。为避免冲突，我想在所有Bulma类前面加上一个静态前缀。因此，例如Bulma的“模态”类将可以作为“bulma-modal”访问。 像这样的东西：

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

这将（希望）避免所有类冲突，并且仍允许我在同一范围内使用语义和Bulma。

感谢您提供任何帮助或建议。

Answer 1

在你的bulma scss文件中尝试这样

$my-name: mycss--;

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

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

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

Answer 2

今天，我已经看到了针对U的打包过程。这非常简单。 确切地，scss / sass将呈现为css。因此，在使用此软件包之前，您需要先生成CSS

https://github.com/RadValentin/postcss-prefix-selector

Answer 3

您可能对这个框架感兴趣https://github.com/Glidias/v-namespace

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

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