Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

importing scss from node_modules causes build to fail

See original GitHub issue

Bug

Importing a scss (eg, bootstrap) fails with error

 Rendering routes error: Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.

This happens when import is done in lazy loaded component. How to reproduce:

add @import "~bootstrap/scss/bootstrap"; at the top of pages/UserInfo/styles.scss
directly navigate to http://localhost:3000/UserInfo/1 or refresh page. It’ll show “Not Found 😦” and above error in console.

Seems to work if imported to top level component or index route component.

Issue Analytics

State:
Created 4 years ago
Comments:13 (6 by maintainers)

Top GitHub Comments

1reaction

amitava82commented, Aug 29, 2019

Yeah importing like so @import 'node_modules/bootstrap/scss/bootstrap'; works.

0reactions

hienhuynhtmcommented, Aug 29, 2019

@amitava82 how about removing ~ character. In my project, I just use like below and it works import '@package/folder_name/dist/ace.css';

Top Results From Across the Web

SCSS imports fail · Issue #6058 - GitHub

Import modules in your scss; run node_modules/.bin/webpack-dev-server; See error ... ERROR in [removed] Module build failed (from .

Importing SCSS from a Node Module causes Webpack Errors

I have an Angular 7 app, built using a starter kit called ASPNet Core Angular Universal, and I would like to use SCSS...

Sass: @import

The @import rule has a number of serious issues: @import makes all variables, mixins, and functions globally accessible. This makes it very difficult...

sass-loader - webpack - JS.ORG

The sass-loader uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules...

css modules cannot be imported from within node_modules

When I have a file named *.module.scss (not even imported), I have warnings in the terminal saying that CSS Modules cannot be imported...