Gulp-sass: IncludePath not working in current version

[jayaprakashkamaraj]

Hi Team,
Reason : It's works with old node-sass 4.7.2, but it doesn't work in node-sass 4.8.1 latest version. Can you please provide the solution for this issue. It throws error.

Error: File to import not found or unreadable: '..'

Note: It's works with node-sass 4.7.2 version

var sass = require('gulp-sass'); pipe(sass({ outputStyle: 'expanded', **includePaths: path** })

Thanks,
Jayaprakash K.

[xzyfer]

Please provide the actual includePaths you're using.
We have tests for includePaths so this shouldn't have out right broken.

[jayaprakashkamaraj]

my actual path is ,

pipe(sass({ outputStyle: 'expanded', includePaths: ["./node_modules/@syncfusion/"] })

Same code is working in old version. But it's not working in latest version node-sass only

[xzyfer]

Do you know the @import producing the error?

On 12 Mar. 2018 9:40 pm, "jayaprakashkamaraj" [e-mail]
wrote:

my actual path is ,

pipe(sass({ outputStyle: 'expanded', includePaths:
["./node_modules/@syncfusion/"] })

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/dlmanning/gulp-sass/issues/668#issuecomment-372264764,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAjZWLQq-QXRaLHoFxo8MK3OSD65Mkftks5tdlB_gaJpZM4SmX4f
.

[jayaprakashkamaraj]

all the styles available in that path.. but it throws error.. can you tell me the reason why it's not working in latest version..

[xzyfer]

That's what I'm trying to figure out. Trying to get more information
because the error is confusing

On 12 Mar. 2018 9:49 pm, "jayaprakashkamaraj" [e-mail]
wrote:

all the styles available in that path.. but it throws error.. can you tell
me the reason why it's not working in latest version..

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/dlmanning/gulp-sass/issues/668#issuecomment-372267252,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAjZWFEBp44GC-J3HpN9Q97_97fXAqlOks5tdlKugaJpZM4SmX4f
.

[jayaprakashkamaraj]

stylesXX\bootstrap.scss
Error: File to import not found or unreadable: base/styles/bootstrap.scss.

this is the error.. and the mentioned styles are available in that path..

[ashclarke]

I had the same issue.

• Sass Config: includePaths: ["app/css/**/*.scss", "./app/third-party"]

• Failing Import example: @import "./pioneer/src/1.settings/settings"

• The file to import is located in <projectroot>/app/third-party/pioneer/src/1.settings/

• The file importing from these directories is one SCSS file in: <projectroot>/app/css/

However, I have fixed the issue. I removed ./ from the start of my second include:

includePaths: ["app/css/**/*.scss", "app/third-party"]

@jayaprakashkamaraj - Have a try.

_Note_:
Leaving ./ in the include path, but removing it from the import (@import "pioneer/src/1.settings/settings") did not work.

[xzyfer]

We have identified the issue in LibSass https://github.com/sass/libsass/issues/2588.

The work around for now is to not use ./ or ../ in include paths.

[ashclarke]

@xzyfer - Thanks for the update 👍🏻

[xzyfer]

Out of curiosity are you working on, or load files from a UNC or network path?

[ashclarke]

No, my directory looks like this:

├───css
│   ├───1.settings
│   ├───4.base
│   ├───5.components
│   ├───6.trumps
│   └───7.third-party
...
├───third-party
│   ├───pioneer
│   │   └───src
│   │       ├───1.settings
│   │       ├───2.tools
│   │       ├───3.generic
│   │       ├───4.base
│   │       ├───5.components
│   │       ├───6.trumps
│   │       └───7.third-party
...

The main app SCSS file imports all the others, in the sub-directories, and is located in ./app/css.

[ErraticFox]

@xzyfer I've tried using the path module get around using ./ or ../ but still no success. I've tried multiple different ways, a couple of which being this:

includePaths: [
    path.join(__dirname, 'node_modules')
]

and

includePaths: [
    'node_modules'
]

in my SCSS file I'm compiling, I have @import '@material/toolbar'; though I keep getting the error Error: File to import not found or unreadable: @material/toolbar.

[landsman]

Yeah, I want it too please :)

My project structure:

├───docroot
│   ├───themes/custom/sz/sass/_dependencies.scss
│   └───themes/custom/sz/sass/style.scss
│ ─── node_modules/
│ ─── packages.json
│ ─── gulpfile.js

and in _dependencies.scss are imports like this:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
... etc

gulp task:

process.chdir('docroot/themes/custom/sz');
...
gulp.task('sass', () =>
{
    return gulp
        .src(filesExist('./sass/styles.scss'))
        .pipe(sourceMaps.init())
        .pipe(sass({
          includePaths: ['./node_modules/', __dirname + '/node_modules', 'node_modules'],
        }))
        .on('error', (err) => {
            console.warn(err);
            browserSync.notify(err.message, 3000);
            this.emit('end');
        })
        .pipe(prefixer({
            browsers: ['last 3 versions', 'IE 9'],
            cascade: false
        }))
        .pipe(size({
            gzip: true,
            title: '🙄️ css front -'
        }))
        .pipe(sourceMaps.write())
        .pipe(concat('styles.css'))
        .pipe(gulp.dest(css_folder))
        .pipe(reload({stream:true}));
});

But id not working:

$ gulp sass
[18:08:05] Using gulpfile ~/localhost/svetzeny_thunder/gulpfile.js
[18:08:05] Starting 'sass'...
{ Error: sass/_dependencies.scss
Error: File to import not found or unreadable: ~bootstrap/scss/functions
       Parent style sheet: /Users/michal.landsman/localhost/svetzeny_thunder/docroot/themes/custom/sz/sass/_dependencies.scss
        on line 8 of sass/_dependencies.scss
>> @import "~bootstrap/scss/functions";
   ^

    at options.error (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/node-sass/lib/index.js:286:26)
  status: 1,
  file: '/Users/michal.landsman/localhost/svetzeny_thunder/docroot/themes/custom/sz/sass/_dependencies.scss',
  line: 8,
  column: 1,
  message: 'sass/_dependencies.scss\nError: File to import not found or unreadable: ~bootstrap/scss/functions\n       Parent style sheet: /Users/michal.landsman/localhost/svetzeny_thunder/docroot/themes/custom/sz/sass/_dependencies.scss\n        on line 8 of sass/_dependencies.scss\n>> @import "~bootstrap/scss/functions";\n   ^\n',
  formatted: 'Error: File to import not found or unreadable: ~bootstrap/scss/functions\n       Parent style sheet: /Users/michal.landsman/localhost/svetzeny_thunder/docroot/themes/custom/sz/sass/_dependencies.scss\n        on line 8 of sass/_dependencies.scss\n>> @import "~bootstrap/scss/functions";\n   ^\n',
  messageFormatted: '\u001b[4msass/_dependencies.scss\u001b[24m\nError: File to import not found or unreadable: ~bootstrap/scss/functions\n       Parent style sheet: /Users/michal.landsman/localhost/svetzeny_thunder/docroot/themes/custom/sz/sass/_dependencies.scss\n        on line 8 of sass/_dependencies.scss\n>> @import "~bootstrap/scss/functions";\n   ^\n',
  name: 'Error',
  stack: 'Error: sass/_dependencies.scss\nError: File to import not found or unreadable: ~bootstrap/scss/functions\n       Parent style sheet: /Users/michal.landsman/localhost/svetzeny_thunder/docroot/themes/custom/sz/sass/_dependencies.scss\n        on line 8 of sass/_dependencies.scss\n>> @import "~bootstrap/scss/functions";\n   ^\n\n    at options.error (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/node-sass/lib/index.js:286:26)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }
/Users/michal.landsman/localhost/svetzeny_thunder/gulpfile.js:127
            this.emit('end');
                 ^

TypeError: this.emit is not a function
    at DestroyableTransform.gulp.src.pipe.pipe.on (/Users/michal.landsman/localhost/svetzeny_thunder/gulpfile.js:127:18)
    at emitOne (events.js:121:20)
    at DestroyableTransform.emit (events.js:211:7)
    at onwriteError (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:449:12)
    at onwrite (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:470:11)
    at WritableState.onwrite (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:180:5)
    at DestroyableTransform.afterTransform (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:93:3)
    at errorM (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/gulp-sass/index.js:130:14)
    at Object.callback (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/gulp-sass/index.js:141:18)
    at options.error (/Users/michal.landsman/localhost/svetzeny_thunder/node_modules/node-sass/lib/index.js:289:32)
landsman2-mbp:svetzeny_thunder michal.landsman$ 

Is that possible @dlmanning?
Thank you

[aosmichenko]

Is there a working example on how to use includePath ?

[aosmichenko]

I am using:
gulp -v
[01:51:02] CLI version 2.0.1
[01:51:02] Local version 4.0.0
"gulp-sass": "^4.0.2",
"gulp": "^4.0.0",
Here is my gulpfile: https://gist.github.com/aosmichenko/7db099af4c80664a4686d83aff09379e

and everything works fine doing import like that:
@import "bootstrap/scss/bootstrap-grid";

[kwhat]

@import "~bootstrap/scss/functions"; should be @import "bootstrap/scss/functions"; as the ~ does not appear to resolve to node_modules using gulp.

[xzyfer]

~ imports are a webpack feature and are not part of the Sass language.

On Thu., 9 May 2019, 8:12 am Alex Barker, [e-mail] wrote:

@import "~bootstrap/scss/functions"; should be @import
"bootstrap/scss/functions"; as the ~ does not appear to resolve to
node_modules using gulp.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/dlmanning/gulp-sass/issues/668#issuecomment-490669839,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAENSWD3KVJUFYSFPNUFDXDPUNF5XANCNFSM4EUZPYPQ
.