How to use SASS with Bootstrap 4

Question

I recently created an HTML template using Boostrap and SASS via SCOUT.

I created one extra file called "_custom.scss" where I put all of my customization styles/CSS. Boostrap 4 alpha contains "_variables.scss" where you can edit the background colors, color, shadows and many more. However for some reason when I tried to edit this part:

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

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

It won't just allow me and won't reflect the changes on my Boostrap HTML template. Here's what I have on my section on my HTML file.

<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>

Now here's my _custom.scss file has:

/* 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;
}

Basically I have the following folder on my project:

Am I doing something wrong with this that's why it wont work?

Answer 1

it seems that _custom.scss support for bootstrap is on the way, see

item: Consider implementing a _custom.sccss for easier, built-in variable overrides

if you want to use <link rel="stylesheet" href="css/custom.css"> then you must remove the underscore from _custom.scss. sass compile custom.scss to custom.css

How to use SASS with Bootstrap 4

Question

1 answers

solution1
2 2015-11-19 17:31:57

How to use SASS with Bootstrap 4

Question

1 answers

solution1 2 2015-11-19 17:31:57

solution1
2 2015-11-19 17:31:57