The gulp-sass import feature has been acting up quietly

Question

The gulp-sass import feature has been acting up quietly

I'm currently attempting to transpile a scss file using gulp-scss. However, when I execute the task, it seems that the imports are not being recognized.

gulpfile.js

gulp.src('./app/css/app.scss', {base: './'})
    .pipe(sass({includePaths:'./node_modules/foundation-sites/scss'}))
    .pipe(gulp.dest('./web'));

app.scss

/*my custom styles*/
@import 'my-custom-styles';

// Sass utilities
@import 'util/util';

// Global variables and styles
@import 'global';

// Components
@import 'grid/grid';
etc.....

app.css

/*my custom styles*/
body{background:black;}

I was anticipating that app.css would be filled with foundation code. Any suggestions?

Edit: I'm not receiving any errors even after implementing error handling methods. Console

[00:52:07] Using gulpfile ~/dev/rise-client/gulpfile.js
[00:52:07] Starting 'scss'...
[00:52:07] Finished 'scss' after 9.28 ms

css import sass gulp

Answer 1

Answer №1

It appears that there may be a mistake in your data origins, consider checking the following:

.pipe(sass(/* configuration */))
.on('error', function(err) { console.log(err); }))

Answer 2

It appears that there may be a mistake in your data origins, consider checking the following:

.pipe(sass(/* configuration */))
.on('error', function(err) { console.log(err); }))

Answer 3

Answer №2

Upon examining the imported files, it appears that they do not directly style any elements. Instead, they consist of variables and definitions for @mixin and @function. If you do not reference these in your own app.scss file, the styles from the imported files will not be included in your final compiled app.css.

For instance, if you use $warning-color in your app.scss like so:

@import 'util/util';
@import 'global';
@import 'grid/grid';

body {
  background:$warning-color;
}

Your resulting compiled app.css will be:

body {
  background: #ffae00;
}

Therefore, the issue lies with your SCSS structure, not your gulpfile.

Answer 4

Upon examining the imported files, it appears that they do not directly style any elements. Instead, they consist of variables and definitions for @mixin and @function. If you do not reference these in your own app.scss file, the styles from the imported files will not be included in your final compiled app.css.

For instance, if you use $warning-color in your app.scss like so:

@import 'util/util';
@import 'global';
@import 'grid/grid';

body {
  background:$warning-color;
}

Your resulting compiled app.css will be:

body {
  background: #ffae00;
}

Therefore, the issue lies with your SCSS structure, not your gulpfile.

Answer 5

Answer №3

My mistake was in the way I was importing foundation.

The correct way is to use @import 'foundation';
and not import all the components individually. :/

Here is the corrected scss file

@import 'foundation';

Answer 6

My mistake was in the way I was importing foundation.

The correct way is to use @import 'foundation';
and not import all the components individually. :/

Here is the corrected scss file

@import 'foundation';

The gulp-sass import feature has been acting up quietly

Answer №1

Answer №2

Answer №3

Similar questions

The webpage appears fine on the local server, but displays incorrectly on IIS (Internet Explorer 11)

Why is the background image not loading properly on first hover with CSS?

Guide on utilizing font-awesome icons stored in node-modules

Flexbox problem within Material UI

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

Drop-down and autocomplete feature in Material UI design framework

The fixed position div remains stationary as the page scrolls

Incorporating a bottom line or border within the input field with a specified width

Struggling to properly set up the hamburger and close icons

Troubleshooting problems with anchor-targets in Skrollr

How can I style the empty text in an ExtJS grid using CSS?

Embed an HTML element within a DIV container

Encountered an error when attempting to load the external module @babel/register during the

Excess spacing in image on top of CSS background overlay

center text above images in flexbox when page is resized

Discovering the font-weight attribute in Selenium IDE

My Testimonial Slider seems stuck in its current position and won't budge to the left

What is the best way to create a fading footer effect on scroll using jQuery?

Tips for automatically displaying the scroll bar continuously on iOS 15 without requiring user interaction

Discovering the screen width and increasing its value using CSS