Question: Why require node_modules to be in the sass path?

[lbjones]

I know this has come up several time, but I'd like to know why this was decided:

NOTE: The components' Sass files expect that the node_modules directory containing the @Material scope folder is present on the Sass include path.

I am using this project with webpack and vue. In order to add node_modules to the path in this context took me several days to figure out. In the end, I found it was a bug with sass loader, and found the solution buried in an issue someone filed: webpack-contrib/sass-loader#412 . I added this line to my webpack config and got it working: (even though this was not the documented way to do it)

scss: 'vue-style-loader!css-loader!sass-loader?{"includePaths":["./node_modules"]}',

Well webpack 3.0 has come out, and I have to solve this problem all over again! I've already poured a good 4 hours into it, and still haven't found a solution.

So back to my original question, is there a good reason why this was decided? I'm about to throw in the towel and use a different framework. But obviously I really don't want to because this project has been so great in every other way.

It seems like it would be so easy to rewrite the paths to be relative instead of based on what's in the path. For example @import "@material/theme/mixins"; would become @import "../../theme/mixins";

If given the green light, I would submit the pull request!

[Garbee]

What's wrong with Webpack 3? There shouldn't be any re-inventing here. It's a major because of an internal breaking change. Now, that change could be what is causing your issue and you simply need to wait for the extensions to get fixed.

[lbjones]

Yeah I don't know what changed. All I know is my workaround no longer works. But it was a workaround after all, so I guess it was little fragile.

Everything else seems to work with my same webpack config, just not the path. I'm getting errors like this:

Module build failed:
	@import "@material/checkbox/mdc-checkbox";
^
      File to import not found or unreadable: @material/checkbox/mdc-checkbox.

[Garbee]

All I know is my workaround no longer works

What is the "workaround" in question? If you're talking about the include paths in the config, that's exactly what is recommended. So, that means something has happened in Webpack 3 to make it work differently.

[lbjones]

I described the workaround in the original post, with the link to the github issue. There is a bug with sass loader that is preventing me from adding paths in the context of my application. But there is an open issue with that project, as it is not the fault of this project. If you'd like to help out, you're welcome to join the discussion at webpack-contrib/sass-loader#466 !

But the main point of my issue here is that I'd like to know if we can change the import statements in this project to use relative paths instead of absolute? That is the way it is most often done, and I can't see any downsides to refactoring it that way.

[Garbee]

Hard-coded relative paths aren't a good option. As that them enforces a required directory structure which may not exist.

Looks like there is some work going on in #830 to make a script to hot-rewrite the imports to be relative if needed. Not sure how to use what is currently merged for that though.

[amsheehan]

@Garbee is correct in why we use @Material imports. He is also correct in that #830 and #831. If you would like to use the script, it appears that all it expects is a path to the root of your project.

cc: @lynnjepsen correct me if I'm wrong. Closing

[lbjones]

I'll check into it. Thanks for the input!