Laravel - 设置 sass答案

【问题标题】：Laravel - seting up sassLaravel - 设置 sass
【发布时间】：2017-02-08 18:20:42
【问题描述】：

我正在尝试在我的 laravel 项目中设置 sass，我创建了一个文件夹 resources/assets/sass，安装了 npm 模块，但没有任何内容被复制到 public/css 文件夹，所以当我打开我的页面时，我在控制台中收到错误：

加载资源失败：服务器响应状态为 404 （未找到）

当我运行 gulp 时，它会在浏览器中打开公用文件夹的文件夹结构。我应该如何设置它？

这是我的 gulpfile.js

var gulp          = require('gulp');
var sass          = require('gulp-sass');
var include       = require('gulp-include');
var watch         = require('gulp-watch');
var batch         = require('gulp-batch');
var sourcemaps    = require('gulp-sourcemaps');
var prefix        = require('gulp-autoprefixer');
var connect       = require('gulp-connect');
var browserify    = require('gulp-browserify');
var livereload    = require('gulp-livereload');
var browsersync   = require('browser-sync');

var config = {
  port: 1338,
  srcDir: './src',
  destDir: './public',
  content: {
    src: '/**/*.html'
  },
  styles: {
    src: '/scss/app.scss',
    dest: '/css',
    includePaths: [
      'node_modules/foundation-sites/scss',
      'node_modules/motion-ui/src'
    ],
    prefix: ["last 2 versions", "> 1%", "ie 9"]
  },
  scripts: {
    src: '/js/app.js',
    dest: '/js'
  },
  img: {
    src: '/img/**/*',
    dest: '/img'
  }
};

var srcDir = './src',
    destDir = './build';

gulp.task('styles', function() {
  return gulp.src(config.srcDir + config.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: config.styles.includePaths,
      sourceMap: true,
      outFile: config.destDir + config.styles.dest + '/app.css',
      outputStyle: 'compressed'
    }))
    .pipe(prefix(config.styles.prefix))
    .pipe(sourcemaps.write())
    .on('error', sass.logError)
    .pipe(gulp.dest(config.destDir + config.styles.dest))
    .pipe(browsersync.reload({ stream: true }));
});

gulp.task('scripts', function() {
  gulp.src(config.srcDir + config.scripts.src)
      .pipe(browserify({
        insertGlobals : true,
        debug : !gulp.env.production
      }))
      .pipe(gulp.dest(config.destDir + config.scripts.dest))
});

gulp.task('include', function() {
  gulp.src(config.srcDir + config.content.src)
    .pipe(include())
      .on('error', console.log)
    .pipe(gulp.dest(config.destDir));

  return gulp.src(config.srcDir + config.img.src)
    .pipe(gulp.dest(config.destDir + config.img.dest));
});

gulp.task('webserver', function() {
  connect.server({
    root: [config.destDir],
    port: config.port
  });
});

gulp.task('browsersync', function() {
  browsersync({
    port: config.port,
    proxy: 'localhost:' + config.port
  });
});

gulp.task('watch', ['browsersync'], function () {
  watch(config.srcDir + '/**/*.*', batch(function (events, done) {
    gulp.start('include', done);
    gulp.start('styles', done);
    gulp.start('scripts', done);
  }));
});

gulp.task('default', ['styles', 'scripts', 'include', 'webserver', 'watch']);

【问题讨论】：

标签： laravel sass gulp laravel-elixir

【解决方案1】：

您是否运行过“npm install”命令？

【讨论】：

编译资产适用于 Laravel Elixir。我在您的 gulpfile.js 中没有看到它。据我所知，gulpfile 必须包含以下内容：var elixir = require('laravel-elixir'); elixir(function(mix) { mix.less('app.less'); }); 类似的东西......这可能是问题所在。