Sass - 为从文件导入的所有类添加前缀（使用 sass 导入或 webpack 加载器）

Posted 2023-02-22

【中文标题】Sass - 为从文件导入的所有类添加前缀（使用 sass 导入或 webpack 加载器）

【英文标题】：Sass - Prefix all classes imported from file (with sass import or webpack loader)

【发布时间】：2016-10-18 12:37:51

【问题描述】：

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

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

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

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

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

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

感谢您的任何帮助或建议。

【参考方案1】：

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

结合使用 sass:meta 从节点模块中导入样式表，使其可以嵌套在选择器层次结构中。

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

【讨论】：

这和做的不是一回事吗：.bulma @import '../node_modules/bulma/sass/helpers/flexbox.sass'; ?

【参考方案2】：

.prefix- 
    &btn 

    
    &nav 

    

.prefix-btn 
.prefix-nav 

【讨论】：

见“Explaining entirely code-based answers”。虽然这在技术上可能是正确的，但它并不能解释为什么它可以解决问题或应该是选择的答案。除了帮助解决问题，我们还应该进行教育。

【参考方案3】：

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

$my-name: mycss--;

.#$my-namebtn 
  ...


.#$my-nameinput 
  ...


.#$my-nameheader 
  ...

【讨论】：

感谢您的回答。但我显然不能在这样的 css 框架中使用所有类的前缀。工作量很大。