How to resolve node_modules when webpack.config.js is not in root ?

[eromoe]

Hi,

I faced a problem while using https://github.com/material-components/material-components-web/

@import "material-components-web/material-components-web"; got error:

File to import not found or unreadable: material-components-web/material-components-web
....

Add resolve-url-loader not work, config like below:

    {
      test: /\.scss$/,
      loader: 'style-loader!css-loader!sass-loader!resolve-url-loader!sass-loader?sourceMap',
    },

I solved this error by assign includePaths in sass-loader

{
      test: /\.scss$/,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            includePaths: [path.resolve(process.cwd(), 'node_modules')],
          },
        },
      ],
    }

Folder structure:

I am using react-boilerplate https://github.com/react-boilerplate/react-boilerplate to build project.

node_modules is in same directory as app .

---

I guess it is due to webpack.config.js is not in root dir ? Is there any way make resolve-url-loader compatible to this situation ?

[bholloway]

@eromoe In general you will need tilde ~ to get imports in SASS. However I am not sure if this "not in root dir" structure will give you further issues.

[bholloway]

Closing this due to inactivity.