Question

使用this tutorial（关于如何使用Elixir和Laravel 5. *和Bootswatch），我在Elrair的Laravel项目中设置了Bootswatch样式表。

一切正常，样式表已加载，我有所需的流明样式。但我不知道如何修改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;

使用Elixir修改Bootswatch变量

0 个答案: