有没有一种方法可以在SCSS中`@extend` bootstrap类,而不必导入bootstrap本身?

f4t66c6m  于 12个月前  发布在  Bootstrap
关注(0)|答案(3)|浏览(109)

我在sample.scss文件中定义了以下自定义类。

.custom-class {
    @extend .rounded-pill;
    @extend .border;
    @extend .bg-light;
}

当我编译代码时,我得到以下错误
留言原文:找不到目标选择器。使用“@extend .rounded-pill!可选”以避免此错误
将其更改为@extend .rounded-pill !optional,使错误消失。但是,.rounded-pill.border.bg-light不会根据需要导入/应用到custom-class。有没有一种方法可以扩展bootstrap CSS类,而不必直接将bootstrap类导入到我的项目中?
我们的想法是包含bootstrap的CDS并定义自己的类来扩展bootstrap。
如果我添加@import ../node_modules/bootstrap/scss/bootstrap';一切工作,但引导代码导入到我的文件,我不想。

更新

为了澄清,这里有一个我想完成的示例,
下面的代码在custom-close.scss文件中。编译时,下面的SCSS代码应该会生成一个名为custom-close.css的新CSS文件。

@import ../node_modules/bootstrap/scss/_close';
@import ../node_modules/bootstrap/scss/_buttons';

.custom-close {
    @extend .btn;
    @extend .btn-close;
    padding: 0;
}

如您所见,我正在从Bootstrap模块导入_close.scss_buttons.scss文件。
但是,导入_close_buttons会导致_buttons_close文件中的所有代码都包含在最终文件(即custom.css)中。

0md85ypi

0md85ypi1#

要在SCSS中使用@extend和Bootstrap类,而不必导入整个Bootstrap框架,您需要访问Bootstrap源SCSS文件或包含要扩展的Bootstrap类的部分SCSS文件。
你可以这样做:

*下载Bootstrap源SCSS:

  • 进入Bootstrap GitHub仓库(https://github.com/twbs/bootstrap)。
  • 将存储库下载或克隆到本地计算机。
    *使用Bootstrap的SCSS变量:
  • 你不需要导入整个Bootstrap框架,但是你应该导入Bootstrap的SCSS变量和你想要扩展的类所需要的任何其他必要的部分(例如,mixin)。在自定义SCSS文件的顶部导入这些文件。
// Import Bootstrap's variables and mixins
@import 'path-to-bootstrap/scss/variables';
@import 'path-to-bootstrap/scss/mixins';

// Add more imports for necessary Bootstrap partials if needed

*扩展Bootstrap类:

  • 导入Bootstrap变量和mixin之后,您可以在自定义SCSS文件中扩展Bootstrap类。
.my-custom-button {
    @extend .btn;
    // Add your custom styles here
}

.my-custom-alert {
    @extend .alert;
    // Add your custom styles here
}

*编译您的SCSS:

  • 使用您喜欢的SCSS编译器(例如Node-sass、Dart-sass)将自定义SCSS文件编译为CSS。
    *使用编译后的CSS:
  • 在HTML文件中包含已编译的CSS。

通过遵循这些步骤,您可以有选择地扩展Bootstrap类,而不必导入整个Bootstrap框架。这种方法允许您在项目中仅使用Bootstrap的需要部分,同时保持CSS轻量级。

klr1opcd

klr1opcd2#

是的,您可以在SCSS中使用@extend指令,而无需导入整个Bootstrap框架。@extend指令用于共享一个选择器与另一个选择器的一组CSS属性。你可以这样做:
1.创建一个SCSS文件,在其中使用Bootstrap的类。
1.定义您自己的自定义类并使用@extend指令从Bootstrap类继承样式。举例来说:

# Define your custom class
.my-custom-button {
  @extend .btn; # Extending Bootstrap's .btn class
  # Add any additional styles or modifications here
}

在本例中,我们创建了一个自定义类.my-custom-button,并扩展了Bootstrap的.btn类。这意味着.my-custom-button将继承Bootstrap的.btn类中定义的所有样式。
1.使用像Sass这样的SCSS编译器将SCSS文件编译成CSS。请确保在编译器的配置中包含 Bootstrap 样式表的路径,以便它知道在哪里可以找到 Bootstrap 样式。
1.在HTML中使用生成的CSS:

<button class="my-custom-button">Custom Button</button>

通过这样做,您可以利用Bootstrap的样式并在自定义类中扩展它们,而无需将整个Bootstrap框架导入到项目中。这可以帮助您保持CSS文件更小,更高效。

x8goxv8g

x8goxv8g3#

你不能@extend一些东西而不导入它。
不知道你说的“引导代码被导入到我不想要的文件中”是什么意思,但我可以向你保证它没有缺点。事实上,无论何时你导入Bootstrap的CSS,无论是预编译的还是SCSS,你都是在“将Bootstrap的代码导入到你的文件中”。
以下是how to customise Bootstrap的官方文档。
若要覆盖任何默认值,请在从Bootstrap导入它们之前定义它们的值。
要使用Bootstrap @mixins,您必须从Bootstrap导入它们。别无他法
您所要求的相当于希望在代码中使用一个包而不导入它。
进一步澄清后,似乎 “引导代码导入到我的文件中” 您的意思是 “引导代码包含在我的构建中”。要从包中排除任何依赖项,请将该依赖项声明为external。每个构建工具(rollupwebpackvite)都有自己特定的语法。它们很相似。
为了让使用你的包的项目知道它需要一个特定的其他包才能让你的包工作,你还必须在你的package.jsonpeerDependencies中声明这个依赖项。这将在控制台中自动生成一个警告,任何项目安装您的软件包时,其项目中没有安装您的对等依赖项的兼容版本。
作为一个旁注,你should change你的进口到:

@use 'bootstrap/...'

相关问题