SCSS Compiling Issue / Components Not Importing

[robertrhu]

Hello!

Thank you for FoundationPress! Its my fave.

Having an issue with compiling SCSS. SCSS components are not importing or compiling when I edit them.

gulp V 3.9.0

Currently the compiler is stuck on the following error...

assets/scss/foundation.scss
Error: It's not clear which file to import for '@import "../components/foundation-sites/scss/vendor/normalize"'.
Candidates:
../components/foundation-sites/scss/vendor/normalize.scss
../components/foundation-sites/scss/vendor/normalize.css
Please delete or rename all but one of these files.
on line 14 of stdin

@import '../components/foundation-sites/scss/vendor/normalize';

I have not been able to clear this error by adding .scss to the end of 'normalize'. I've also tried renaming the file to _normalize.scss. Not working.

An example of a component not importing is _title-bar.scss. When I edit this SCSS file nothing compiles in the terminal.

I'm stumped...any and all help is so greatly appreciated. Thanks Ole and all!

Here is what my foundation-sites.scss file looks like:

@import 'scss/foundation';

@include foundation-everything;

Here is my _foundation.scss file:

/*
  Foundation for Sites components:
  Import the building blocks you need for your project.
  Reducing the number of imported components will optimize page speed.
  ---------------------------------------------------------------------
  The Foundation framework is built by Zurb
  Licensed under MIT Open Source
*/

// Third-party libraries
@import '../components/foundation-sites/scss/vendor/normalize';
@import '../components/fontawesome/scss/font-awesome.scss';
@import '../components/motion-ui/motion-ui.scss';

// Sass utilities
@import '../components/foundation-sites/scss/util/util';

//  Settings and wp-override styles:
@import "global/settings"; // Default settings file. Uncomment each setting you need to change
@import "global/wp-admin"; // Fix issues with wp-admin bar positioning
@import "global/wp-overrides"; // Override the default WordPress styling for some elements

// Global variables and styles
@import '../components/foundation-sites/scss/global';

// Components
@import '../components/foundation-sites/scss/grid/grid';
@import '../components/foundation-sites/scss/typography/typography';
@import '../components/foundation-sites/scss/forms/forms';
@import '../components/foundation-sites/scss/components/visibility';
@import '../components/foundation-sites/scss/components/float';
@import '../components/foundation-sites/scss/components/button';
@import '../components/foundation-sites/scss/components/button-group';
@import '../components/foundation-sites/scss/components/accordion-menu';
@import '../components/foundation-sites/scss/components/accordion';
@import '../components/foundation-sites/scss/components/badge';
@import '../components/foundation-sites/scss/components/breadcrumbs';
@import '../components/foundation-sites/scss/components/callout';
@import '../components/foundation-sites/scss/components/close-button';
@import '../components/foundation-sites/scss/components/drilldown';
@import '../components/foundation-sites/scss/components/dropdown-menu';
@import '../components/foundation-sites/scss/components/dropdown';
@import '../components/foundation-sites/scss/components/flex-video';
@import '../components/foundation-sites/scss/components/label';
@import '../components/foundation-sites/scss/components/media-object';
@import '../components/foundation-sites/scss/components/menu';
@import '../components/foundation-sites/scss/components/off-canvas';
@import '../components/foundation-sites/scss/components/orbit';
@import '../components/foundation-sites/scss/components/pagination';
@import '../components/foundation-sites/scss/components/progress-bar';
@import '../components/foundation-sites/scss/components/reveal';
@import '../components/foundation-sites/scss/components/slider';
@import '../components/foundation-sites/scss/components/sticky';
@import '../components/foundation-sites/scss/components/switch';
@import '../components/foundation-sites/scss/components/table';
@import '../components/foundation-sites/scss/components/tabs';
@import '../components/foundation-sites/scss/components/title-bar.scss';
@import '../components/foundation-sites/scss/components/top-bar';
@import '../components/foundation-sites/scss/components/thumbnail';
@import '../components/foundation-sites/scss/components/tooltip';



// These styles are applied to <meta> tags, which are read by the Foundation JavaScript
.foundation-mq {
  font-family: "#{-zf-bp-serialize($breakpoints)}";
}

@mixin foundation-everything {
  @include foundation-global-styles;
  @include foundation-grid;
  @include foundation-typography;
  @include foundation-button;
  @include foundation-forms;
  @include foundation-visibility-classes;
  @include foundation-float-classes;
  @include foundation-accordion;
  @include foundation-accordion-menu;
  @include foundation-badge;
  @include foundation-breadcrumbs;
  @include foundation-button-group;
  @include foundation-callout;
  @include foundation-close-button;
  @include foundation-drilldown-menu;
  @include foundation-dropdown;
  @include foundation-dropdown-menu;
  @include foundation-flex-video;
  @include foundation-label;
  @include foundation-media-object;
  @include foundation-menu;
  @include foundation-off-canvas;
  @include foundation-orbit;
  @include foundation-pagination;
  @include foundation-progress-bar;
  @include foundation-slider;
  @include foundation-sticky;
  @include foundation-reveal;
  @include foundation-switch;
  @include foundation-table;
  @include foundation-tabs;
  @include foundation-thumbnail;
  @include foundation-title-bar;
  @include foundation-tooltip;
  @include foundation-top-bar;
}

// Include all foundation components
@include foundation-everything;

/*
  My custom styles:
  Add your scss files below to structure your project styles
*/

// Modules
@import "modules/topbar";
@import "modules/footer";
@import "modules/sidebar";

// Custom SCSS
@import "custom/custom";
@import "custom/mediaqueries";

// Components
@import "components/buttons";
@import "components/featured-image";
@import "components/dividers";
@import "components/off-canvas";

// Templates
@import "templates/front";
@import "templates/kitchen-sink";
@import "templates/page-default";
@import "templates/page-sidebar-left";
@import "templates/page-full-width";
@import "templates/single-post";

Here's my gulpfile.js:

/*jslint node: true */
"use strict";

var $           = require('gulp-load-plugins')();
var argv        = require('yargs').argv;
var gulp          = require('gulp');
var browserSync = require('browser-sync').create();
var merge       = require('merge-stream');
var sequence    = require('run-sequence');
var colors      = require('colors');

// Enter URL of your local server here
// Example: 'http://localwebsite.dev'
var URL = '';

// Check for --production flag
var isProduction = !!(argv.production);

// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];

// File paths to various assets are defined here.
var PATHS = {
  sass: [
    'assets/components/foundation-sites/scss',
    'assets/components/motion-ui/src/'
  ],
  javascript: [
    'assets/components/jquery/dist/jquery.js',
    'assets/components/what-input/what-input.js',
    'assets/components/foundation-sites/js/foundation.core.js',
    'assets/components/foundation-sites/js/foundation.util.*.js',

    // Paths to individual JS components defined below
    'assets/components/foundation-sites/js/foundation.abide.js',
    'assets/components/foundation-sites/js/foundation.accordion.js',
    'assets/components/foundation-sites/js/foundation.accordionMenu.js',
    'assets/components/foundation-sites/js/foundation.drilldown.js',
    'assets/components/foundation-sites/js/foundation.dropdown.js',
    'assets/components/foundation-sites/js/foundation.dropdownMenu.js',
    'assets/components/foundation-sites/js/foundation.equalizer.js',
    'assets/components/foundation-sites/js/foundation.interchange.js',
    'assets/components/foundation-sites/js/foundation.magellan.js',
    'assets/components/foundation-sites/js/foundation.offcanvas.js',
    'assets/components/foundation-sites/js/foundation.orbit.js',
    'assets/components/foundation-sites/js/foundation.responsiveMenu.js',
    'assets/components/foundation-sites/js/foundation.responsiveToggle.js',
    'assets/components/foundation-sites/js/foundation.reveal.js',
    'assets/components/foundation-sites/js/foundation.slider.js',
    'assets/components/foundation-sites/js/foundation.sticky.js',
    'assets/components/foundation-sites/js/foundation.tabs.js',
    'assets/components/foundation-sites/js/foundation.toggler.js',
    'assets/components/foundation-sites/js/foundation.tooltip.js',

    // Motion UI
    'assets/components/motion-ui/motion-ui.js',

    // What-input
    'assets/components/what-input/what-input.js',

    // Include your own custom scripts (located in the custom folder)
    'assets/javascript/custom/*.js'
  ],
  pkg: [
    '**/*',
    '!**/node_modules/**',
    '!**/components/**',
    '!**/scss/**',
    '!**/bower.json',
    '!**/Gruntfile.js',
    '!**/package.json',
    '!**/composer.json',
    '!**/composer.lock',
    '!**/codesniffer.ruleset.xml',
    '!**/packaged/*'
  ]
};

// Browsersync task
gulp.task('browser-sync', ['build'], function() {

  var files = [
            '**/*.php',
            'assets/images/**/*.{png,jpg,gif}'
          ];

  browserSync.init(files, {
    // Proxy address
    proxy: URL,

    // Port # 
    // port: PORT
  });
});

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {  
  // Minify CSS if run wtih --production flag
  var minifycss = $.if(isProduction, $.minifyCss());

  return gulp.src('assets/scss/foundation.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    .pipe(minifycss)
    .pipe($.if(!isProduction, $.sourcemaps.write('.')))
    .pipe(gulp.dest('assets/stylesheets'))
    .pipe(browserSync.stream({match: '**/*.css'}));
});

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {

  var uglify = $.uglify()
    .on('error', function (e) {
      console.log(e);
    });

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('foundation.js'))
    .pipe($.if(isProduction, uglify))
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('assets/javascript'))
    .pipe(browserSync.stream());
});

// Copy task
gulp.task('copy', function() {
  // Motion UI
  var motionUi = gulp.src('assets/components/motion-ui/**/*.*')
    .pipe($.flatten())
    .pipe(gulp.dest('assets/javascript/vendor/motion-ui'));

  // What Input
  var whatInput = gulp.src('assets/components/what-input/**/*.*')
      .pipe($.flatten())
      .pipe(gulp.dest('assets/javascript/vendor/what-input'));

  // Font Awesome
  var fontAwesome = gulp.src('assets/components/fontawesome/fonts/**/*.*')
      .pipe(gulp.dest('assets/fonts'));

  return merge(motionUi, whatInput, fontAwesome);
});

// Package task
gulp.task('package', ['build'], function() {
  var fs = require('fs');
  var pkg = JSON.parse(fs.readFileSync('./package.json'));
  var time = $.util.date(new Date(), '_yyyy-mm-dd_HH-MM');
  var title = pkg.name + time + '.zip';

  return gulp.src(PATHS.pkg)
    .pipe($.zip(title))
    .pipe(gulp.dest('packaged'));
});

// Build task
// Runs copy then runs sass & javascript in parallel
gulp.task('build', function(done) {
  sequence('copy',
          ['sass', 'javascript'],
          done);
});

// Default gulp task
// Run build task and watch for file changes
gulp.task('default', ['build', 'browser-sync'], function() {
  // Log file changes to console
  function logFileChange(event) {
    var fileName = require('path').relative(__dirname, event.path);
    console.log('[' + 'WATCH'.green + '] ' + fileName.magenta + ' was ' + event.type + ', running tasks...');
  }

  // Sass Watch
  gulp.watch(['assets/scss/**/*.scss'], ['sass'])
    .on('change', function(event) {
      logFileChange(event);
    });

  // JS Watch
  gulp.watch(['assets/javascript/custom/**/*.js'], ['javascript'])
    .on('change', function(event) {
      logFileChange(event);
    });
});

[shoaibik]

Hi, Did you installed the bower components using bower install

[olefredrik]

I close this because of lack of response. Please reopen if this is still an issue