SassError: Invalid CSS after "": expected 1 selector or at-rule

[jauggy]

I have a scss file added to my project where I just @import another scss file. However, I get an error when running yarn storybook.

Here's my styles.scss file:

// Import CoreUI styles
@import "~@coreui/coreui/scss/coreui.scss";

Here's the error:
https://i.stack.imgur.com/Zzd5h.png

Here's .storybook/main.js which has webpack config:

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });

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

[Awjin]

This appears to be an error with the build system, unrelated to the Sass language. (Perhaps a duplicate of webpack-contrib/sass-loader#862)?

[bsmolyansky]

Was this ever resolved? I have the same exact error.

[InSuperposition]

In v6 the import for global styles should be declared in .storybook/preview.js