How to import a CSS file in app.styl?

[stuartcusack]

I’m using a package that has a css file and I’m trying to import it in app.styl like so:

// app.styl
@import 'package/package.css'

When I build I get the error:

“The dependency was not found…” And this long error message contains references to css-loader, postcss-loader and stylus-loader.

How do I configure the quasar stylus loader to process simple css files in app.styl? I can’t figure it out. I have tried the following:

yarn add --dev css-loader postcss-loader node-css

//quasar.conf
cfg.module.rules.push({
    test: /\.css$/,
    loader: 'postcss-loader'
 })

The above code does not work.

For the moment I can bypass the problem by creating a styl file from the package’s css.

[stuartcusack]

Might be a false alarm. I was probably importing the wrong path:

@import '../../node_modules/package/package.css'

I’m not sure if the packages I added with Yarn are needed or if this works straight out of the box.

Is there a shorthand way to access the node_modules directory, I wonder?

[zeidanbm]

Try to prefix it with a ~, so it becomes @import '~package/package.css' or you can even alias the package path if you want. Check the link here on webpack to get an idea on that.