scss files from node modules not loading

[lastobelus]

Scss files from installed node modules are not loading.

What I did:

// in index.js

import 'slick-carousel'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

What happened:

Error in ./~/slick-carousel/slick/slick.scss
Module parse failed: /XXXX/node_modules/slick-carousel/slick/slick.scss Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /* Slider */
|
| .slick-slider {
|     position: relative;
|     display: block;
 @ ./src/assets/js/index.js 9:0-42
 @ multi ./~/shopify-pipeline/lib/hot-client.js ./src/assets/js/index.js

Error in ./~/slick-carousel/slick/slick-theme.scss
Module parse failed: /XXXX/node_modules/slick-carousel/slick/slick-theme.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";
|
| // Default Variables
 @ ./src/assets/js/index.js 11:0-48
 @ multi ./~/shopify-pipeline/lib/hot-client.js ./src/assets/js/index.js

Inspecting the code, this would be because node_modules is in the excludes for the sass loader. What was the rationale behind this?

[lastobelus]

font files from node_modules were also being excluded.

After removing exclude node_modules from the fonts fileloader config and from common_excludes, slick-carousel loads.

[nddery]

You should be able to include SCSS files from inside your other SCSS files. For example, from inside src/assets/sass/index.scss (which is imported from your entry point):

@import '~slick-carousel/slick/slick.scss';

Same goes for fonts, if you include them from your SCSS file, where you use them, Webpack should find and parse them correctly