Import CSS file from NPM package

help
1

I use METEOR@1.3.2.4 and Stylus.
I’m trying to import CSS file from NPM package located at node_modules/angular-material-data-table/dist/md-data-table.css

@import 'angular-material-data-table/dist/md-data-table.css'
@import '{}/node_modules/angular-material-data-table/dist/md-data-table.css'

Both import statements throw the error:

Resource interpreted as Stylesheet but transferred with MIME type text/html: 
"http://localhost:3000/angular-material-data-table/dist/md-data-table.css".

Can somebody help me what the path I should use to include CSS file from NPM?

2

According to the Stylus pre-processsor documentation the correct syntax would be:

@import '{}/node_modules/angular-material-data-table/dist/md-data-table.css'

assuming Meteor’s Stylus package actually supports importing .css files (don’t know as we don’t use Stylus). Can you import the file if you copy it to /imports/ with @import '/imports/md-data-table.css'; ?

Are you able to import any .styl files from node_modules?

3

Stylus should be able to import .css files ( http://stylus-lang.com/docs/import.html )
I gues this is something wrong with Meteor’s imports from node_modules or forked Stylus in core ‘stylus’ package.

4

Agreed, but it looks like Meteor’s Stylus package does not support all the capabilities of the NPM version, so not sure it supports @import of CSS. I’m just speculating though.

5

Yes, It could be. It’s forked :slight_smile: I use Stylus a lot and I never wanted to import .css file into .styl files (but this is just me, I can see that it could be helpful).
I gues for now the better way is to just import .css file in .js file. Like:

import 'angular-material-data-table/dist/md-data-table.css';

especially when you use Angular ‘components’.

6

Thank you, guys! The only way that really works is import 'angular-material-data-table/dist/md-data-table.css';