0

使用本教程（关于如何将 Elixir 和 Laravel 5.* 与 Bootswatch 一起使用），我使用 Elixir 在我的 Laravel 项目中设置了一个 Bootswatch 样式表。

一切正常，样式表已加载，我拥有所需的 Lumen 样式。但我不知道如何修改 Bootswatch 变量？

这是我的app.scss。在我修改变量之前加载 Bootswatch 文件：

@import "bootstrap/stylesheets/bootstrap/variables";
@import "bootswatch/lumen/variables";
@import "bootstrap/stylesheets/bootstrap";
@import "bootswatch/lumen/bootswatch";
@import url('https://fonts.googleapis.com/css?family=Lato:100');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

$brand-danger: purple;

但它在这里不起作用。

将此变量修改为vendor/bower_components/bootswatch-sass/lumen/_variables.scss时，它可以工作。

这是gulpfile.js：

var elixir = require('laravel-elixir');
var bowerDirBootstrap = "vendor/bower_components/bootstrap-sass-official/assets/";
var bowerDirBootswatch = "vendor/bower_components/bootswatch-sass";
var bowerDirJquery = "vendor/bower_components/jquery/dist/";

elixir(function(mix) {
     mix.sass('app.scss')
         // copy relevant files to the resources folder.  This is the css
         .copy(bowerDirBootstrap, 'resources/assets/sass/bootstrap')
         .copy(bowerDirBootswatch, 'resources/assets/sass/bootswatch')
         // this is the javascript
         .copy(bowerDirJquery + 'jquery.js', 'resources/assets/js/jquery.js')
         .copy(bowerDirBootstrap + 'javascripts/bootstrap.js',
         'resources/assets/js/bootstrap.js')
         .version('css/app.css')

     mix.scripts([
             'js/jquery.js',
             'js/bootstrap.js'
         ],
         'public/js/app.js',
         'resources/assets'
     );
 });

老实说，我并不完全理解“复制”部分：当我删除它们时，一切仍然如前所述：修改变量_variable.scss有效，更新变量app.scss无效。

编辑

我试图将变量放在任何地方，并且有/没有 !default 标志，没有任何效果。

$brand-danger: white !default;
@import "bootstrap/stylesheets/bootstrap/variables";
$brand-danger: white !default;
@import "bootswatch/lumen/variables";
$brand-danger: white !default;
@import "bootstrap/stylesheets/bootstrap";
$brand-danger: white !default;
@import "bootswatch/lumen/bootswatch";
$brand-danger: white !default;
@import url('https://fonts.googleapis.com/css?family=Lato:100');
$brand-danger: white !default;
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
$brand-danger: white !default;
4

0 回答 0