Question

事先，如果标题有点误导，我道歉。我发现很难在标题中正确解释我的问题。我会继续解释我的问题。

这是我的gulpfile：

elixir(function(mix) {
    mix.sass([
        'app.scss'
    ], 'public/css/app.css')
    .styles([
        'reset.css',
        'resources/assets/css/bootstrap-responsive/css/bootstrap.css',
        'app.css'
    ], 'public/css/main.css')
    .version([
         'css/main.css'
    ]);
});

我的问题是，当我更改app.scss时，它只会更新公共目录中的app.css文件。我想要它做的是在编译app.css文件之后，通过组合三个样式表来创建main.css文件。问题是我实际上并没有改变这三种样式表中的任何一种，因为gulp正在为我编译。

我不确定是否有办法实际修复此问题，但任何答案都有帮助。

感谢。

P.S。我不想将其他两个css文件导入我的scss文件而不是组合，因为当我必须加载页面时它会添加更多请求。

Answer 1

由于普通css也是可编译的，试试这个：

$(function() {
  /* Build random Data */
  var randomData = [
    [], /* Child 0 */
    [], /* Child 1 */
    [], /* Child 2 */
    [], /* Child 3 */
  ].map(function(child) {
    for (var i = 1; i <= 31; i++) {
      child.push([Date.UTC(2016, 7, i), Math.random()]);
    }
    return child;
  });

  /* Append checkboxes to DOM */
  randomData.forEach(function(child, i) {
    $('#the-form').append('<input checked type="checkbox" data-index="' + i + '"> Series #' + (i + 1) + '<br>');
  });

  /* Chart drawing function */
  var redraw = function() {
    $('#the-chart').highcharts({
      chart: {
        zoomType: 'x'
      },
      title: {
        text: 'Random series data over time'
      },
      subtitle: {
        text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: 'Some rate'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },
      series: randomData.filter(function(child, i) {
        /* Choose checked only */
        return document.querySelector('input[data-index="' + i + '"]').checked
      }).map(function(child, i) {
        /* Then return as series */
        return {
          type: 'area',
          name: 'Series #' + (i + 1),
          data: child
        };
      })
    });
  };

  /* Call redraw on change */
  $('input[data-index]').on('change', redraw);

  /* And select the first one start */
  $('input[data-index]:first').val(true);
  redraw();
});

或者使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <h3>Select Series</h3> <div id="the-form"> </div> <div id="the-chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>导入elixir(function(mix) { mix.sass([ 'reset.css', 'resources/assets/css/bootstrap-responsive/css/bootstrap.css', 'app.scss' ], 'public/css/main.css') .version([ 'css/main.css' ]); });文件中的其他两个css文件，而不只是在gulpfile中列出app.scss文件。

Laravel Elixir没有结合使用样式表

1 个答案: