如何整合 sass 和 bootstrap？答案

【问题标题】：How to integrate sass and bootstrap?如何整合 sass 和 bootstrap？
【发布时间】：2017-07-10 04:16:10
【问题描述】：

我安装了 laravel，但我不明白如何使用 sass 和 bootstrap。

我们在资源文件夹“/reosources/sass/app.scss”中得到这个内容：

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

@import "variables";

@import "node_modules/bootstrap-sass/assets/stylesheet/bootstrap"

public/css/app.css 具有引导样式。

在欢迎视图中，我可以使用引导类。但是现在如何在引导程序中使用 sass？例如，如果我想定义一些变量，例如：

$background-white #fff;
$background-red: red;

并将这个变量应用到 bootstrap html，我应该在 _variable.scss 中定义这个变量吗？然后使用我需要在 app.css 中更改的变量？我试图这样做，但没有应用颜色。例如，在 app.css 中，我在 bootstrap 正文中放置了这个：

  body{
font-family:"Helvetica Neue",
Helvetica,Arial,
sans-serif;
font-size:14px;
line-height:1.42857143;
color:#333;
background-color:#fff}

如果我改为：

body{
font-family:"Helvetica Neue",
Helvetica,Arial,
sans-serif;
font-size:14px;
line-height:1.42857143;
color:#333;
background-color:$background-red}

它不工作，背景不会变成红色。你能帮助理解这是如何工作的吗？谢谢！

【问题讨论】：

你需要在你的 laravel 安装根目录下运行“npm install”，然后调用 gulp 更新 js 和 css 文件。

标签： twitter-bootstrap laravel

【解决方案1】：

你需要阅读 Laravel mix documentation

您需要从安装 npm 包开始。在命令行中运行npm install。编辑 _variable.scss 文件。然后运行npm run dev 来构建新的public/css/app.css，它将进行更改。

在您的刀片文件中，您使用 mix() 帮助程序链接到 app.css。

`<link href="{{ mix('css/app.css') }}" rel="stylesheet">`

确保您已安装 npm。如果你在 Mac 上使用 Homebrew 运行 brew install npm

【讨论】：