@imports work for everything but a directory named 'components'

[tsmuse]

I have a weird issue that I'm not sure if it's me or not, but I thought I'd report it because I love this package.

Doing an @import from a glob works every-which-way I can think of trying it, except when I try to do a glob on a folder named 'components'. Specifically my import statement is: @import '../components/**/*.scss';

When I do that or any other glob with the components folder I get this error:

ERROR in ./src/sass/luster.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader>/lib/loader.js??ref--9-2!./src/sass/luster.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'outside'; ^ File to import not found or unreadable: outside. in /Users/ts/repos/lusteR/components/node_modules/node-sass/test/fixtures/cwd-include-path/root/index.scss (line 1, column 1) @ ./src/sass/luster.scss 2:14-137 21:1-42:3 22:19-142 @ ./.storybook/config.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

If I change the name of the components folder to anything else, including 'component' or 'components1' everything works as it should.

Thanks :D

[maoberlehner]

That's interesting :D Good thing I decided to name my folders singular by default because is have a components folder in most of my projects.

I'll take a look at it. I think I don't use too much logic apart from the default glob package 🤔

[mikevercoelen]

Confirmed, this is a problem. I have the same @import 'outside'; error

[maoberlehner]

@tsmuse you have a node_modules folder inside of your components directory. Inside of this node_modules folder there is the index.scss file which tries to import outside. If you remove the node_modules folder or you write your glob pattern in a way that it ignores the node_modules folder, everything should work fine.

@mikevercoelen I guess it's something similar, hard to say without error message.

[mikevercoelen]

@maoberlehner

    ERROR in ./src/react-components.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/react-components.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    @import 'outside';
    ^
          File to import not found or unreadable: outside.
          in /Users/mike/Development/frontend-react-components/node_modules/node-sass/test/fixtures/cwd-include-path/root/index.scss (line 1, column 1)

This is what I tried:

@import "!(node_modules)/**/!(components).scss";

Or this:

@import "./!(components)/**/*.scss";

The file that is using this glob is located in my src/ directory

[maoberlehner]

@mikevercoelen thanks for providing more details. So I guess the problem is, that the current working directory is used as an import path. So node-sass-magic-importer not only looks into src/ but also node_modules/ and there it finds the file with the @import 'outside'; statement.

Can you try to change the cwd option? https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-magic-importer#options

const options = {
  cwd: path.join(process.cwd(), `src`),
};

Thx!

[mikevercoelen]

@maoberlehner I'm only using glob importer, and passing options to it doesn't seem to work

[tsmuse]

I actually don't have a node_modules inside my components directory, but my whole project is a directory called 'components' so I suspect I'm having a similar issue to @mikevercoelen. removing the relative path from the import (changed it to @import src/components/**/*.scss fixed it though. Thanks for the help :D

[maoberlehner]

@mikevercoelen in this case you can try to set the node-sass option includePaths to ['src'] (maybe you have to use an absolute path) https://github.com/sass/node-sass#includepaths Thx!