如何在Bootstrap 4中使用SASS

Question

我最近使用Boostrap和SASS通过SCOUT创建了HTML模板。

我创建了一个名为“ _custom.scss”的额外文件，在其中放置了所有自定义样式/ CSS。 Boostrap 4 alpha包含“ _variables.scss”，您可以在其中编辑背景颜色，颜色，阴影等。 但是由于某些原因，当我尝试编辑此部分时：

    // Settings for the `<body>` element.

    $body-bg:                    #000 !default;
    $body-color:                 $gray-dark !default;

它不仅会允许我，而且不会在我的Boostrap HTML模板上反映出更改。 这是我的HTML文件部分中的内容。

<head>

<title>Boostrap 4 - Tutorial</title>
 <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="author" content="Sam Norton">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">


 <!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>

现在这是我的_custom.scss文件具有：

/* GENERAL STYLES
-------------------------------------------------*/
body {
    font-family:'Lato', sans-serif;
    font-size:1em;
    color:#777;
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
    color:#333;
    line-height:1.4;
    font-weight:700;
}

.mx-width {
    max-width:960px;
    margin:0 auto;
}

a,a:hover {
    color:#563d7c;
    text-decoration:none;
}

img {
    max-width:100%;
}

header {
    padding-bottom:50px;
}

.intro {
    font-family:'Lato';
    font-size:60px;
    line-height:1;
    font-weight:300;
    color:#fff
}

.learn {
    font-family:'Lato';
    font-size:27px;
    line-height:1.4;
    font-weight:300;
    color:#fff;
}

.jumbotron-fluid {
    padding:0;
}

基本上，我的项目中包含以下文件夹：

我在做错什么，这就是为什么它不起作用？

Answer 1

似乎_custom.scss支持引导程序，请参见

项目：考虑实现_custom.sccss以实现更轻松的内置变量覆盖

如果要使用<link rel="stylesheet" href="css/custom.css">则必须从_custom.scss中删除下划线。 sass将custom.scss编译为custom.css

如何在Bootstrap 4中使用SASS

问题描述

1 个解决方案

解决方案1
2 2015-11-19 17:31:57

如何在Bootstrap 4中使用SASS

问题描述

1 个解决方案

解决方案1 2 2015-11-19 17:31:57

解决方案1
2 2015-11-19 17:31:57