Build failure when including a node_module in main.scss

[SunnyJohal]

Submit a feature request or bug report

• I've read the guidelines for Contributing to Roots Projects
• This is a bug report
• This request isn't a duplicate of an existing issue
• I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse forums

---

What is the current behavior?

When I am including a node module in main.scss that references another installed module the build fails (I was attempting to install Material Design Web Components).

What is the expected or desired behavior?
Any module that is called should be able to include other installed in the node_modules folder if required.

---

Bug report

Please provide steps to reproduce, including full log output:

1. After theme setup install material components: yarn add material-components-web

2. In resources/assets/styles/main.scss reference the sass file by adding the following line: @import "~material-components-web/material-components-web";

3. Run yarn start and the build will fail

Please describe your local environment:

WordPress version: 4.8.2

OS: MAC OS High Sierra 10.13

NPM/Node version: NPM: 5.4.2 | Node: 8.1.2

Where did the bug happen? Development or remote servers?

Dev server locally

---

Other relevant information:

X

[retlehs]

looks like you'll need to modify the webpack config, see material-components/material-components-web#351

please use https://discourse.roots.io/ for further support

[DragosMocrii]

To fix the includes for Material Design components in SCSS, use the following config:

{
        test: /\.scss$/,
        include: config.paths.assets,
        use: ExtractTextPlugin.extract({
          fallback: 'style',
          use: [
            {loader: 'cache'},
            {loader: 'css', options: {sourceMap: config.enabled.sourceMaps}},
            {
              loader: 'postcss', options: {
                config: {path: __dirname, ctx: config},
                sourceMap: config.enabled.sourceMaps
              }
            },
            {
              loader: 'resolve-url',
              options: {sourceMap: config.enabled.sourceMaps}
            },
            {
              loader: 'sass', options: {
                sourceMap: config.enabled.sourceMaps,
                includePaths: [path.resolve(process.cwd(), 'node_modules')] //this is the line that makes it work
              }
            }
          ]
        })
      },

Credit goes to @eromoe material-components/material-components-web#1106 (comment)