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.

include styles that live in node_modules

See original GitHub issue

Hi,

if I try to do something like

styleUrls: [
     './index.css',
    'materialize-css/dist/css/materialize.css'
]

it gets turned into:

styles: [
    require('./index.css'),
    require('./materialize-css/dist/css/materialize.css'
]

I could just use a relative path, or import 'materialize-css/dist/css/materialize.css but I’d rather use the styleUrls option if I could. Do you know how I could accomplish this?

Issue Analytics

State:
Created 7 years ago
Reactions:4
Comments:16 (4 by maintainers)

Top GitHub Comments

2reactions

tomgeorgecommented, Oct 20, 2016

I made a little hack to your loader where if I preface a style with ~, kind of like how you would import a sass file in sass, it resolves to node_modules. So it ends up looking like

styleUrls: [
     './index.css',
    '~materialize-css/dist/css/materialize.css'
]

Is that something you’d be interested in? I could do a PR for that.

1reaction

tomgeorgecommented, Feb 26, 2019

Hi, I’m sorry that I have not looked at this in a while. I no longer am writing angular2 applications professionally, and with the advent of angular-cli, this sort of webpack tweaking is sort of hidden from you, now. I’m closing this issue, and again I apologize for the lack of movement on it.

Top Results From Across the Web

Import CSS from "node_modules" in Webpack - Stack Overflow

I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules"...

How do I include node_modules css files? #1789 - GitHub

This way you can add src/styles/global/_base.scss , which overrides some things in Normalize.css, and all classes there will be global, without ...

Include plain CSS from node_modules in theme

I'm a bit stuck on this. A third party node_module includes styles in plain CSS, as normal. The theme only compiles .scss files....

Getting started | Primer CSS

Install the Primer CSS npm package modules by running npm install @primer/css . This will install all of the SCSS source files into...

Basic Features: Built-in CSS Support - Next.js

Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here....