如果我只喜欢在 HTML 文件中引导，如何在 SASS 中扩展引导类？答案

【问题标题】：How can I extend Bootstrap classes in SASS if I only liked to bootstrap in the HTML file?如果我只喜欢在 HTML 文件中引导，如何在 SASS 中扩展引导类？
【发布时间】：2019-08-20 19:27:00
【问题描述】：

如果我已经链接到 HTML 文件中的引导样式表，我想知道如何在 SASS 中扩展引导类，如下所示：

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      <link rel="stylesheet" href="styles.css">

        <title>Some title</title>
    </head>

然后，我有一个 .scss 文件，该文件生成我也链接到我的 HTML 文档头部的附加 css 文件。但例如，如果我尝试从 .scss 文件扩展任何 Bootstrap 类，就像我在这里所做的那样：

    .p3 {
    @extend .p-3;
    font-weight: bold;
    }

它抛出一个错误说：

Sass::SyntaxError: ".p3" 未能@extend ".p-3"。未找到选择器“.p-3”。如果扩展应该能够失败，请使用“@extend .p-3 !optional”。

我该如何解决这个问题？

非常感谢，

【问题讨论】：

这是不可能的。如果你确实有一个 scss 文件，那为什么不导入 bootstrap 呢？
SASS 需要服务器端的编译器。您无法在浏览器中运行/解析 SASS
您在使用某种 CLI 吗？在您的项目中包含用于引导程序的 node_module 非常容易，并将其.scss 文件into your build pipeline 附加一个设置配置来构建它，但是您只需要您想要的部分即可。否则你只需要使用一堆选择器覆盖来覆盖原来的引导类。
karthick 如何将引导程序导入 css 文件？ Chris W. 我不知道 CLI 是什么？

标签： html css bootstrap-4

【解决方案1】：

您需要通过在 main.scss 中导入引导程序来包含它。

类似：

@import 'bootstrap.scss';

.yourClass {
   @extend .p-3;
   font-weight: bold;
}

更多信息请阅读documentation

【讨论】：