Storybook: Having Syntax Error when including Stylus file in preview.js

[mavichow]

Describe the bug
Couldn't import '../app.styl' on .storybook/preview.js in React/Next.js App , will hit syntax error.

To Reproduce
Steps to reproduce the behavior:

1. npx create-next-app
2. cd my-app
3. npx sb init
4. npm i stylus stylus-loader
5. create app.styl on root folder with stylus syntax
6. go to .storybook/preview.js paste this import '../app.styl' on the first line
7. Follow this webpack guide @ https://storybook.js.org/docs/react/configure/webpack
8. Modify the sass-loader to stylus-loader (may refer snippets at below)

Error return

ERROR in ./app.styl 1:5
Module parse failed: Unexpected token (1:5)
File was processed with these loaders:
 * ./node_modules/stylus-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> html {
|   background: #808080;
| }

Expected behavior
Able to preview app.styl on when i run npm run storybook

Code snippets

//.storybook/preview.js
import '../app.styl'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

//app.styl
html
    background red

//.storybook/main.js
const path = require('path');

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.styl$/,
      use: ['stylus-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
}

System

Environment Info:

  System:
    OS: macOS 11.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Firefox: 82.0.3
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^6.1.9 => 6.1.9 
    @storybook/addon-essentials: ^6.1.9 => 6.1.9 
    @storybook/addon-links: ^6.1.9 => 6.1.9 
    @storybook/react: ^6.1.9 => 6.1.9 

[drinkmooon]

Have you solved this issue? I met similar problem. Then I add css-loader to the config.rule:
use:['stylus-loader','css-loader']
After this the error became:
`./src/components/Header.styl:12:13
Syntax error: Header.styl Missed semicolon

10 |
11 | +tablet() {

12 | height: $container-mobile-height
| ^
13 | padding: 10px 15px
14 | }`
But this style works well in another project with stylus-loader.

[mavichow]

Yup, added css-loader and works like a charm! thanks @drinkmooon !