Unexpected character '@' on scss imports

[may17]

Hello,

I have a question about an error I get while running npx nuxt storybook. I use vuetify and scss and the error I am getting in different variations is something like that:

ModuleParseError: Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // Imports
> @import './_variables.scss'

What I've tried to solve it?

I've tried to extend webpack config with the storybook.webpackFinal method in the nuxt config. Didn't fix the problem

webpackFinal (config, { configDir }) {
      // manipulate webpack config
      const eslintLoader = {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/,
        options: {
          fix: true
        }
      }

      config.module.rules.push(eslintLoader)
      config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
      })

      config.resolve.alias = {
        ...config.resolve.alias,
        '~': rootPath,
        '~~': rootPath,
        '@': rootPath
      }

      return config

Anybody any idea or suggestion? What did I miss?

Thank you very much for your help!