Stylus: Unexpected character '@' (1:0)

• Laravel Mix Version: 1.4.5
• Node Version: 6.9.2
• NPM Version: 3.10.9
• OS: macOS 10.13.0

Description:

When installing vuetify I need to compile the stylus assets. When the assets are compiling I get the following errors:

error  in ./node_modules/vuetify/src/stylus/components/_selection-controls.styl

Module parse failed: /Users/dan/Code/Sites/practiceo/practiceo/node_modules/vuetify/src/stylus/components/_selection-controls.styl Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import '../bootstrap'
| @import '../theme'
|

The initial import works correctly but the succeeding imports cause errors.

Steps To Reproduce:

Install vuetify: yarn add vuetify

Create the stylus entry point (resources/assets/stylus/app.styl) with the following content:

@import '../../../node_modules/vuetify/src/stylus/app'

Update webpack.mix.jsfile: mix.stylus(‘resources/assets/stylus/app.styl’, ‘public/css/app.css’);

[johnboc]

Thanks pachoulie, you’ve saved my day. For me, I needed the following code:

    mix.webpackConfig({
        module: {
            rules: [
                {
                    test: /\.styl$/,
                    loader: ['style-loader', 'css-loader', 'stylus-loader']
                }
            ]
        }
    })

[SumNeuron]

I was hoping there was a rollup version…