laravel gulp 未按预期工作

laravel gulp not working as expected

我不是 gulp 和 laravel 专家,我只是在学习它是如何工作的,我正在学习 laracast 上的教程,但发生了一些奇怪的事情,我把它放在我的 app.scss

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

$color:red;

body{
    color:$color
}

在 gulp 文件上我有这个:

const elixir = require('laravel-elixir');

要求('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
    mix.sass('app.scss');
});

但不知何故,当我在 cmd 上 运行 gulp 时,我得到一个 app.css 大约 5000 行代码,而不仅仅是我定义的风格 :S,我得到这样的东西:

@charset "UTF-8";
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

不知道发生了什么,如果有人能给我一个建议,我很感激:D

这是因为代码

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

在您的 app.scss 文件中。

Gulp 也在您的最终结果中添加了 bootstrap 文件。 这是正常行为。