Skip to content
This repository has been archived by the owner on Jul 24, 2024. It is now read-only.

Add _index.scss resolution when using @import on a directory #2339

Open
mattpilott opened this issue Apr 20, 2018 · 39 comments
Open

Add _index.scss resolution when using @import on a directory #2339

mattpilott opened this issue Apr 20, 2018 · 39 comments

Comments

@mattpilott
Copy link

I have hit a point where this would be really useful for myself and the team. Take a look at sass/sass#690

Theres a fair bit of discussion resolving with the addition of this feature, I am wondering if this is on the radar and when it will be available.

Thanks!

@nschonni
Copy link
Contributor

The support has landed in libsass with sass/libsass@3af837c but won't be available here till the next libsass tagged release is brought into node-sass

@mattpilott
Copy link
Author

Any timescales on that @nschonni ?

@oqx
Copy link

oqx commented Jul 10, 2018

Seconding @matt3224 here. Is there a timeline on this feature?

@nschonni
Copy link
Contributor

Libsass was bumped in 4.9 9d6faf6 so this should be available

@nschonni
Copy link
Contributor

Actually doesn't look like it was https://github.com/sass/node-sass/blob/master/src/libsass/src/file.cpp

@nschonni nschonni reopened this Jul 10, 2018
@Chlebamaticon
Copy link

Chlebamaticon commented Aug 7, 2018

It still doesn't work. :(

I've generated angular project with @angular/cli@6.0.8 and dependency that's responsible for compiling whole project(@angular-devkit/build-angular@~0.6.8) is using node-sass@4.9.1. As far as I know it's also compiling all the .sass files within application.

To the point, am receving such error after attempting to import file called '_index.scss' from directory 'src/styles'.

@import './styles';
^
      File to import not found or unreadable: ./styles.
      in /Users/<user>/Projects/<name>/src/index.scss (line 2, column 1)

@moraveyo
Copy link

moraveyo commented Oct 29, 2018

Doesn't work for me too. (
And the doc says it's already there: https://sass-lang.com/documentation/file.SASS_REFERENCE.html#index_files

I invented this hack:
Instead of index.scss or _index.scss I make a _.scss.

For exapmle block/_.scss

Then I import like that:
@import "block/";
Everything works fine, although syntax check of my IDE is not very happy.

@mattfelten
Copy link

I'm looking for this too. Just tested the current version of node-sass to see if it's updated in 4.11, but it's not yet. https://github.com/mattfelten/node-sass-index-test

@mattfelten
Copy link

mattfelten commented Dec 19, 2018

Just looked into this more. Looks like libsass has the change required in 3.6, but that hasn't been released yet. Looks like we're waiting for 3.6 to be released first.

sass/libsass#2772 (comment) says it'll be released around Xmas, so converting from internet time, we'll have this feature by June.

@PolyPik
Copy link

PolyPik commented May 23, 2019

libsass 3.6 got released just under a week ago.

How fast can we release a new version of node-sass that uses libsass 3.6?

@xzyfer
Copy link
Contributor

xzyfer commented May 23, 2019 via email

@nottrobin
Copy link
Contributor

nottrobin commented Jun 3, 2019

@mattfelten so converting from internet time, we'll have this feature by June.

June was a pretty good estimate (fingers crossed)

@PolyPik
Copy link

PolyPik commented Jul 9, 2019

So is this change to libsass 3.6 going to be a minor release or a major release?

@PolyPik
Copy link

PolyPik commented Jul 12, 2019

@xzyfer Do we have an ETA on this improvement?

@fetis
Copy link

fetis commented Jul 19, 2019

so the documentation https://sass-lang.com/documentation/at-rules/import#index-files lies saying it's available in "LibSass since 3.5.0"?

I'm trying to make it work with node-sass v 4.12.0 which has LibSass 3.5.5 under the hood.

schlusslicht added a commit to wooportal/client that referenced this issue Jul 21, 2019
@PolyPik
Copy link

PolyPik commented Aug 5, 2019

There seems to be a drought of commits and PRs.

@dnemoga
Copy link

dnemoga commented Aug 9, 2019

Any updates?

@cactysman
Copy link

cactysman commented Aug 22, 2019

I would actually like to see this thing being configurable but with a fallback to _index.
That way it doesn't have to be that name and also it won't break existing setups if people can just give it a new name.

@nschonni
Copy link
Contributor

@metaa that would be a feature request to sass/sass to change the language

@payneio
Copy link

payneio commented Dec 9, 2019

Still not in node-sass 4.13.0, either, even though the docs made me believe it would work.

@saper
Copy link
Member

saper commented Dec 10, 2019

@payneio which docs?

@mattpilott
Copy link
Author

Have you tried switching to dart sass. I use this now on all projects, has index feature. npm i sass

https://www.npmjs.com/package/sass

@payneio
Copy link

payneio commented Dec 12, 2019

Ahh, @saper, now, I see https://sass-lang.com/documentation/at-rules/import#index-files indicates "LibSass since 3.6.0". Looking into what is packaged with node-sass, it looks like it is currently 3.5.0. I assumed if I downloaded the latest node-sass that it would work. Is there any way to get node-sass with LibSass 3.6.0?

@lachieh
Copy link

lachieh commented Dec 12, 2019

@xzyfer Indicated that it wouldn't be a quick upgrade. If someone else wants to attempt the upgrade, submit a PR.

@nottrobin
Copy link
Contributor

@mattfelten so converting from internet time, we'll have this feature by June.

June was a pretty good estimate (fingers crossed)

Turns out June was a terrible estimate

@kreo
Copy link

kreo commented Feb 21, 2020

you can use _.scss instead of index.scss like this @import "path/to/scss/files/" and it works

@PolyPik
Copy link

PolyPik commented Mar 4, 2020

Is there documentation explaining how node-sass is built? I intend to upgrade the libsass version myself if @xzyfer will not do it.

I know it involves using node-gyp to build libsass and then there are bindings that make libsass work with NodeJS.

However a more or less official explanation would still help a lot.

@saper
Copy link
Member

saper commented Mar 4, 2020

@PolyPik you can build node-sass with a pre-built libsass using LIBSASS_EXT, LIBSASS_CFLAGS and LIBSASS_LDFLAGS environment variables, see example at https://github.com/saper/ports-exp/blob/06f2c7fa24091d143d603c5c86e4b8e3c3982ecf/textproc/node-sass/Makefile#L27-L29

libsass_pic.a can be built by packing object files from the src/.libs directory of libsass into one file like in this line https://github.com/saper/ports-exp/blob/06f2c7fa24091d143d603c5c86e4b8e3c3982ecf/textproc/libsass35/Makefile#L33
This is not necessary if you can live with dynamic linking with the already installed libsass.so, in that case just point to it using LIBSASS_LDFLAGS.

Alternatively, you can update the source in the node-sass directory as checked out from git in src/libsass. Make sure you have that submodule installed. npm install from there should do the job.

Before you build the binding, please update package.json "libsass" value to indicate the version of the libsass you are using, possibly with some indicator this is your change.

Of course - any problems resulting from this remain your own...

@PolyPik
Copy link

PolyPik commented Mar 6, 2020

src/libsass appears to be a subtree not a submodule. If it was a submodule, the Github website would show a different icon for that directory.

Also what branch should I make these changes to when I fork the repo? The master branch?

@saper
Copy link
Member

saper commented Mar 6, 2020

@PolyPik currently v4.13.1 release tag and the master branch are almost identical as we speak,

@PolyPik
Copy link

PolyPik commented Mar 6, 2020

There is also the v5 branch, which is only 4 commits behind master. Perhaps that branch should be rebased on the v4.13.1 tag and then have the libsass update be a commit on the v5 branch.

@saper
Copy link
Member

saper commented Mar 6, 2020

Your call, @PolyPik

@PolyPik
Copy link

PolyPik commented Mar 8, 2020

I have managed to merge the latest master branch changes into branch v5, updated the libsass subtree to 3.6.3 in v5, and successfully built the libsass library after adjusting the libsass.gyp file.

Some of the tests are obviously going to break and this is where I am at. The api.js tests were a relatively easy fix (there was just one issue and it was with the quote function. It no longer allows non-string input as according to recent specs). The number of broken spec.js tests are much more numerous and several tests seem to fail even though the expected and the actual values appear to be identical.

I tried upgrading the sass-spec version to 3.6.3 hoping to fix the issue, but then I realized that at some point in the past, the sass-spec repo did away with separate input and output files. Instead the input and output values are contained within one .hrx file. Which means if I were to change the version, the test file must also be changed to be able to properly read the spec files.

EDIT: Nvm about the expected and the actual values appearing identical. I just noticed some of the differences.

EDIT2: As it turns out the sass-spec repo didn't completely do away with separate input and output files. Some testcases still have separate input.scss and output.css. IMO this makes things even more difficult.

@PolyPik
Copy link

PolyPik commented Mar 8, 2020

Which part of libsass is response for the error message of the following format?
Error: Invalid UTF-8 character "\xE5"

One of the spec tests (libsass-closed-issues/issue_2446) is failing due to the error message being
Error: Invalid UTF-8 sequence

I have grepped the source files in order to find where that message originates but it just doesn't seem to exist even in libsass 3.5.5.

EDIT: Nvm I don't that it is the fault of libsass.

@saper
Copy link
Member

saper commented Mar 8, 2020

One of the spec tests (libsass-closed-issues/issue_2446) is failing due to the error message being
Error: Invalid UTF-8 sequence

https://github.com/sass/libsass/blob/3.5.5/src/parser.cpp#L109

Can we move it to the v5 / upgrade libsass issue?

@PolyPik
Copy link

PolyPik commented Mar 8, 2020

Nvm, I found the real cause of the failing issue_2446 test.

sass/sass-spec@e6baa156

I adjusted the spec.js to account for this change in structure.

It fixed that test and issue_245443, but now other tests just broke as a result that change.

@PolyPik
Copy link

PolyPik commented Mar 16, 2020

It.is.done.

#2859

@abirmingham
Copy link

abirmingham commented Mar 17, 2020

@PolyPik hooray! Does that mean that this will arrive soon? EDIT: Please interpret this as excitement rather than pressure :)

@PolyPik
Copy link

PolyPik commented Mar 24, 2020

It.is.merged.

#2859

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests