Webpack handler for node_modules library scss fix

HongPong · June 18, 2019, 8:43pm

Hi all,

I had some trouble getting webpack to work with the aos library for animations, which uses an import statement to nab an scss file in its js code.

I have filed an issue and PR on github to cover this issue

github.com/roots/sage

add node_modules scss to webpack

opened 08:33PM - 18 Jun 19 UTC

closed 08:49PM - 18 Jun 19 UTC

HongPong

* [x] I've read the [guidelines for Contributing to Roots Projects](https://github.com/roots/.github/blob/master/CONTRIBUTING.md) * [x] This request isn't a duplicate of an existing request * [x] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community ## Summary Improve webpack to process SCSS files correctly when a library is in node_modules and the js code references a SCSS file in an import statement. ## Motivation It was difficult for me to incorporate the AOS animation JS kit which references SCSS in an import statement correctly until I changed the line to scan node_modules correctly. This would help adding other libraries I think, after they have been added with yarn. (but I might be wrong) ## Additional context I'm not too familiar with webpack so can't say if this would introduce unexpected issues I have added a note to the discourse forum here. hope it helps: https://discourse.roots.io/t/webpack-handler-for-node-modules-library-scss-fix/15868

Before I did this i got errors such as

 error  in ./node_modules/aos/src/sass/aos.scss

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

The following change to webpack.config.js worked , by adding node_modules in a bracket. So I have put that in the pull request in case this is helpful for the community.

    test: /\.scss$/,
    include: [config.paths.assets, /node_modules/],

I am not too familiar with webpack so perhaps this may not be helpful for everyone. But it worked for me so far!

Other than that everything has been going pretty well. Thanks!