How to import a CSS file in app.styl?



  • 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.



  • 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?



  • 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.