适用于角项目自定义启动变量

Question

我试图重写引导的默认颜色在我的角度项目。我创建了一个_variables.scss文件我src文件夹内。

在这个文件中的我已经添加下面的代码：$primary: purple;

然后，我有我的导入文件_variables.scss到我这样的主要styles.scss：@import 'variables';

我还安排我angular.json文件，这样我的风格是这样的：

        "styles": [
          "src/styles.scss",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],

我想实现的是，当我使用我的HTML下面的代码：

<button type="submit" class="btn btn-primary auth-button">Sign in</button>

我的按钮的颜色应为紫色。

我想改变以后更多的变量和上几页，因此这应该是一个全局变量。

Answer 1

我曾设法从那里我angular.json它添加到我的风格除去引导和我styles.scss手动导入的方式解决这个问题。

我也改变了以目标的scss文件我的引导路径。这里是我的html代码：

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

这里是我在angular.json风格：

"styles": [
              "src/styles.scss"
            ],

Answer 2

您正在尝试使用自举 - 萨斯功能，但使用的精缩CSS。

你要么需要：

1. 使用bootstrap-sass

   @import './_variables.scss';
   @import '~bootstrap-sass/assets/stylesheets/_bootstrap';

2. 与你的主题编译自己的引导版本，并使用该缩小的版本。
3. 如果你正在使用bootstrap 4，您可以使用CSS变量代替

Answer 3

你可以在你btn-primary同时使用styles.scss的import在上面输入你的变量与自举类_variables.scss改变

.btn-primary {
   color: $primary;
}