2015-09-09 3 views
1

Недавно я создал шаблон HTML, используя Boostrap и SASS через SCOUT.Как использовать SASS с Bootstrap 4

Я создал один дополнительный файл под названием «_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; 
} 

В основном я следующую папку на моем проекте:

enter image description here

я делаю что-то неправильно с этим, что это почему это не работает?

ответ

2

, кажется, что поддержка _custom.scss для начальной загрузки находится на пути, см

пункт: Рассмотрим реализацию _custom.sccss для более легкого, встроенные переменные переопределения

, если вы хотите использовать <link rel="stylesheet" href="css/custom.css">, тогда вы должны удалить подчеркивание из _custom.scss. sass compile custom.scss to custom.css

Смежные вопросы