Laravel-mix: Stylus: Unexpected character '@' (1:0)

[daniel-chris-lucas]

• 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');

[silvioiannone]

Can confirm this issue:

ERROR  Failed to compile with 1 errors                                                                                                                       >     12:07:25 PM

error  in ./node_modules/vuetify/src/stylus/components/_content.styl

Module parse failed: /Users/silvioiannone/Programming/Projects/Cluster/node_modules/vuetify/src/stylus/components/_content.styl Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import '../bootstrap'
|
| .content

P.S. I discovered that this happens only if you're using an "a la carte" import of the component (which, in my case, I did mistakenly):

import VContent from "vuetify/es5/components/VGrid/VContent";

Maybe it's a Vuetify related issue?

[johnboc]

Has anyone got to the bottom of this problem yet? I have just upgraded to Laravel 5.5 and am now getting this error. I also use Vuetify.

[pachoulie]

I experience the issue as well 😞

[pachoulie]

By adding the following to my webpack.mix.js, it compiles fine :)

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.styl$/,
        loader: ['style-loader', 'css-loader', 'stylus-loader', {
          loader: 'vuetify-loader',
          options: {
            theme: path.resolve('./node_modules/vuetify/src/stylus/theme.styl')
          }
        }]
      }
    ]
  }
})

[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']
                }
            ]
        }
    })

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SumNeuron]

@johnboc where does that go in the rollup config?

[johnboc]

What do you mean by rollup config? The code goes in webpack.mix.js

[SumNeuron]

I was hoping there was a rollup version...