Question

自定义/主题引导程序的官方推荐方法是使用sass覆盖引导程序变量。但是我该怎么做，或者更确切地说，如何将流程的这一部分添加到Vue Webpack工作流程中？

谷歌搜索导致尝试编辑 vue.config.js 文件，以将scss加载程序添加到webpack中，但是我找不到所需的文件。

This is the directory structure

我已经使用vue-cli v3.4设置了项目。

我使用的是Vanilla Bootstrap，而不是Bootstrap-Vue组件。

Answer 1

制作一个名为custom.scss的文件。进入node_modules/bootstrap/scss目录并复制_variables.scss中的所有内容。将它们粘贴到您的custom.scss中。

在导入style.scss之前，先在custom.scss中导入bootstrap.scss。

现在在您的main.js导入@/assets/style.scss中。

您还需要从!default中希望覆盖的所有变量中删除custom.scss标志，以使它们也生效。

Answer 2

创建一个文件 /css/bootstrap-custom.scss，内容如下：

// your variable overrides
// modify theme colors map
$theme-colors: (
    "primary":#42b883,
    //...other variables, you can find them in node_modules/bootstrap/scss/_variables.scss
);

// import to set changes
@import "~bootstrap/scss/bootstrap";

在 main 脚本中，导入添加的文件而不是当前导入的 bootstrap css 文件：

// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '@/css/bootstrap-custom.scss';

参考：Bootstrap, Variable defaults

如何在Vue工作流程（Vanilla Bootstrap）中覆盖Bootstrap变量？

2 个答案: