Question

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

我们进入资源文件夹＆＃34; /reourceources/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具有引导样式。

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

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

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

Answer 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

如何集成sass和bootstrap？

1 个答案: