Twitter bootstrap 将引导/scss/混合加载到Vue scss组件中

我有一个vue应用程序，其组件使用scss。我已经安装了sass加载器，它运行得非常好——除了我尝试导入引导scss文件时

这是失败的特定导入：

<style lang="scss">
@import url("~bootstrap/scss/mixins");
...

相比之下，以下导入效果良好：

<style lang="scss">
@import url("~bootstrap/dist/css/bootstrap.css");
...

@导入url（“~bootstrap/dist/css/bootstrap.css”）；
...

从这一点可以得出结论，它不是指失败的NPM包本身。这似乎是因为a）我没有正确引用特定的_mixins.scss文件，或者b）我必须配置我的sass加载程序，以便能够从NPM包导入scss文件

---

有人知道我做错了什么吗？非常感谢您的任何输入。

您不需要使用URL函数

试试这样：

@导入“~bootstrap/scss/mixin”；

如果要从引导导入所有模块，可以通过以下方式执行：

@导入“~bootstrap/scss/functions”；
@导入“~bootstrap/scss/variables”；
@导入“~bootstrap/scss/mixin”；
//可选模块
@导入“~bootstrap/scss/root”；
@导入“~bootstrap/scss/reboot”；
@导入“~bootstrap/scss/type”；
@导入“~bootstrap/scss/images”；
@导入“~bootstrap/scss/code”；
@导入“~bootstrap/scss/grid”；
@导入“~bootstrap/scss/tables”；
@导入“~bootstrap/scss/forms”；
@导入“~bootstrap/scss/buttons”；
@导入“~bootstrap/scss/transitions”；
@导入“~bootstrap/scss/dropdown”；
@导入“~bootstrap/scss/按钮组”；
@导入“~bootstrap/scss/input group”；
@导入“~bootstrap/scss/custom forms”；
@导入“~bootstrap/scss/nav”；
@导入“~bootstrap/scss/navbar”；
@导入“~bootstrap/scss/card”；
@导入“~bootstrap/scss/breadcrumb”；
@导入“~bootstrap/scss/pagination”；
@导入“~bootstrap/scss/badge”；
@导入“~bootstrap/scss/jumbotron”；
@导入“~bootstrap/scss/alert”；
@导入“~bootstrap/scss/progress”；
@导入“~bootstrap/scss/media”；
@导入“~bootstrap/scss/list group”；
@导入“~bootstrap/scss/close”；
@导入“~bootstrap/scss/toasts”；
@导入“~bootstrap/scss/modal”；
@导入“~bootstrap/scss/tooltip”；
@导入“~bootstrap/scss/popover”；
@导入“~bootstrap/scss/carousel”；
@导入“~bootstrap/scss/spinners”；
@导入“~bootstrap/scss/utilities”；
@导入“~bootstrap/scss/print”；

您不需要使用URL函数

试试这样：

@导入“~bootstrap/scss/mixin”；

如果要从引导导入所有模块，可以通过以下方式执行：

@导入“~bootstrap/scss/functions”；
@导入“~bootstrap/scss/variables”；
@导入“~bootstrap/scss/mixin”；
//可选模块
@导入“~bootstrap/scss/root”；
@导入“~bootstrap/scss/reboot”；
@导入“~bootstrap/scss/type”；
@导入“~bootstrap/scss/images”；
@导入“~bootstrap/scss/code”；
@导入“~bootstrap/scss/grid”；
@导入“~bootstrap/scss/tables”；
@导入“~bootstrap/scss/forms”；
@导入“~bootstrap/scss/buttons”；
@导入“~bootstrap/scss/transitions”；
@导入“~bootstrap/scss/dropdown”；
@导入“~bootstrap/scss/按钮组”；
@导入“~bootstrap/scss/input group”；
@导入“~bootstrap/scss/custom forms”；
@导入“~bootstrap/scss/nav”；
@导入“~bootstrap/scss/navbar”；
@导入“~bootstrap/scss/card”；
@导入“~bootstrap/scss/breadcrumb”；
@导入“~bootstrap/scss/pagination”；
@导入“~bootstrap/scss/badge”；
@导入“~bootstrap/scss/jumbotron”；
@导入“~bootstrap/scss/alert”；
@导入“~bootstrap/scss/progress”；
@导入“~bootstrap/scss/media”；
@导入“~bootstrap/scss/list group”；
@导入“~bootstrap/scss/close”；
@导入“~bootstrap/scss/toasts”；
@导入“~bootstrap/scss/modal”；
@导入“~bootstrap/scss/tooltip”；
@导入“~bootstrap/scss/popover”；
@导入“~bootstrap/scss/carousel”；
@导入“~bootstrap/scss/spinners”；
@导入“~bootstrap/scss/utilities”；
@导入“~bootstrap/scss/print”；

我想为那些使用

vue cli构建的项目提供一种替代方案，因为如果最终在多个组件中使用mixin。每次都要手动导入它们，同时还要向文件中添加额外的代码，这可能会让人感到乏味

您可以设置
sass加载程序
将
css
或
scss
注入每个组件。当涉及到诸如SCS的
mixin
、
函数
和
变量
之类的东西时，这非常方便

下面我将导入一个名为
\u theming.scss
的文件，该文件导入引导
混合
、
变量
和
函数
。
通过这种方式，我可以在组件中自由使用引导变量，如果我在
\u theming.scss
文件中执行任何重写，这些变量也将应用于我的应用程序

vue.config.js（如果此文件不存在，请在项目的根目录中创建它，其中包含
package.json
）

module.exports={
css:{
装载机选项：{
sass：{
前置数据：`@import'@/assets/scss/_theming.scss”`
}
}
}
};

\u theming.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

注意：
请注意，不要将任何呈现在
prependData
中使用的文件中的
css
。因为这会将
css
添加到您拥有的每个组件中，即使您没有在组件中使用该css，也会增加包的大小

例如，如果将文件
\u theming.scss
更改为：

.text-red {
  color: red;
}

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

所有组件都会突然包含
css
：

。文本为红色{
颜色：红色；
}
我想为那些使用
vue cli构建的项目提供一种替代方案，因为如果最终在多个组件中使用mixin。每次都要手动导入它们，同时还要向文件中添加额外的代码，这可能会让人感到乏味

您可以设置
sass加载程序
将
css
或
scss
注入每个组件。当涉及到像，
mixins.text-red {
  color: red;
}

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";