我在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
)中。
3条答案
按热度按时间0md85ypi1#
要在SCSS中使用
@extend
和Bootstrap类,而不必导入整个Bootstrap框架,您需要访问Bootstrap源SCSS文件或包含要扩展的Bootstrap类的部分SCSS文件。你可以这样做:
*下载Bootstrap源SCSS:
*使用Bootstrap的SCSS变量:
*扩展Bootstrap类:
*编译您的SCSS:
*使用编译后的CSS:
通过遵循这些步骤,您可以有选择地扩展Bootstrap类,而不必导入整个Bootstrap框架。这种方法允许您在项目中仅使用Bootstrap的需要部分,同时保持CSS轻量级。
klr1opcd2#
是的,您可以在SCSS中使用
@extend
指令,而无需导入整个Bootstrap框架。@extend
指令用于共享一个选择器与另一个选择器的一组CSS属性。你可以这样做:1.创建一个SCSS文件,在其中使用Bootstrap的类。
1.定义您自己的自定义类并使用
@extend
指令从Bootstrap类继承样式。举例来说:在本例中,我们创建了一个自定义类
.my-custom-button
,并扩展了Bootstrap的.btn
类。这意味着.my-custom-button
将继承Bootstrap的.btn
类中定义的所有样式。1.使用像Sass这样的SCSS编译器将SCSS文件编译成CSS。请确保在编译器的配置中包含 Bootstrap 样式表的路径,以便它知道在哪里可以找到 Bootstrap 样式。
1.在HTML中使用生成的CSS:
通过这样做,您可以利用Bootstrap的样式并在自定义类中扩展它们,而无需将整个Bootstrap框架导入到项目中。这可以帮助您保持CSS文件更小,更高效。
x8goxv8g3#
你不能
@extend
一些东西而不导入它。不知道你说的“引导代码被导入到我不想要的文件中”是什么意思,但我可以向你保证它没有缺点。事实上,无论何时你导入Bootstrap的CSS,无论是预编译的还是SCSS,你都是在“将Bootstrap的代码导入到你的文件中”。
以下是how to customise Bootstrap的官方文档。
若要覆盖任何默认值,请在从Bootstrap导入它们之前定义它们的值。
要使用Bootstrap @mixins,您必须从Bootstrap导入它们。别无他法
您所要求的相当于希望在代码中使用一个包而不导入它。
进一步澄清后,似乎 “引导代码导入到我的文件中” 您的意思是 “引导代码包含在我的构建中”。要从包中排除任何依赖项,请将该依赖项声明为
external
。每个构建工具(rollup
、webpack
、vite
)都有自己特定的语法。它们很相似。为了让使用你的包的项目知道它需要一个特定的其他包才能让你的包工作,你还必须在你的
package.json
的peerDependencies
中声明这个依赖项。这将在控制台中自动生成一个警告,任何项目安装您的软件包时,其项目中没有安装您的对等依赖项的兼容版本。作为一个旁注,你should change你的进口到: