Problems with project-relative paths
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 738
- Forks
- 48
- PR merge metrics
- No merged PRs in 30d
Description
Using plain node-sass (gulp-sass), it is possible to specify project-relative paths:
Gulpfile.js:
```js
var gulp = require("gulp");
var sass = require("gulp-sass");
var sassOptions = {};
gulp.task("sass", function() {
gulp.src("./scss/**/*.scss")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css"));
});
````
./scss/styles.scss:
```scss
@import dir1/_file1.scss;
````
./scss/dir1/_file1.scss
```scss
@import dir2/_file2.scss;
.test1 {
color: red;
}
````
./scss/dir2/_file2.scss:
```scss
.test2 {
color: blue;
}
````
With ./scss being the topmost folder, import paths are correctly resolved.
````
$ gulp sass
````
./css/styles.css:
```css
.file2 {
color: blue; }
.file1 {
color: red; }
````
When eyeglass is also used, these project-relative paths aren't relative to project-folder anymore:
```js
var gulp = require("gulp");
var sass = require("gulp-sass");
var eyeglass = require("eyeglass");
var sassOptions = {
// put node-sass options you need here.
eyeglass: {
// put eyeglass options you need here.
}
};
gulp.task("eyeglass", function () {
gulp.src("./scss/**/*.scss")
.pipe(sass(eyeglass(sassOptions)).on("error", sass.logError))
.pipe(gulp.dest("./css-eyeglass"));
});
````
````
$ gulp eyeglass
[...]
Error in plugin 'sass'
Message:
scss/dir1/_file1.scss
Error: Error: Could not import dir2/_file2 from any of the following locations:
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2.scss
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2.sass
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2.css
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/index.scss
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/index.sass
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/index.css
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/_index.scss
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/_index.sass
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/_index.css
on line 1 of scss/dir1/_file1.scss
>> @import 'dir2/_file2';
--------^
````
[Sample project for reproducing this issue.](https://github.com/strarsis/eyeglass-includepath-issue/)
Edit: Using the eyeglass root option (e.g. `root: __dirname` or `root: __dirname + '/scss'`) doesn't seem to change the way how these paths are interpreted.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Gulpfile.js and the sample project linked in the report, comparing the plain node-sass pipeline with the eyeglass pipeline. Trace how imports in scss/styles.scss and scss/dir1/_file1.scss are resolved; done means dir2/_file2.scss is found through project-relative paths when eyeglass is used.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- tooling, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100