Can't compile sass while using Vue Storybook

Question

I'm trying to create storybook on vue. My components written using sass. So, I made this in .storybook/main.js:

webpackFinal: (config) => {
        config.module.rules.push({
            test: /\.s[ac]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'sass-loader',
            ],
        })

        return config
}

And the styles looks like this:

<style lang="sass" scoped>
button
    background-color: red
</style>

So I'm getting this error when trying to compile:

SassError: Invalid CSS after "": expected 1 selector or at-rule, was "button"
        on line 1 of C:\Code\testproj\src\components\UI\TestComponent.vue

And if I change my style to this:

<style lang="sass" scoped>
button {
    background-color: red
}
</style>

All works, but that's not a sass syntax.

Answer 1

I was having this exact same issue and I was able to solve it. The issue is from the webpack config. If you're using SASS, your webpack.config.js file in your .storybook folder should look like this:

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.sass$/,
    use: [
      require.resolve("vue-style-loader"),
      require.resolve("css-loader"),
      {
        loader: require.resolve("sass-loader"),
        options: {
          sassOptions: {
            indentedSyntax: true
          }
        }
      }
    ],
  });

  return config;
};

And if you're using SCSS, then it should be like this:

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      require.resolve("vue-style-loader"),
      require.resolve("css-loader"),
      require.resolve("sass-loader"),
    ],
  });

  return config;
};

I was able to figure this out while reading the Vue Loader Docs