Storybook: how to use @import in scss files inside vue -> <style lang="scss">?

[chovy]

@import '~@/styles/defaults.scss';

This fails when I run npm run storybook

[nickdandakis]

I added a scss rule in my .storybook/webpack.config.js to get this to work.

const path = require('path');

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'sass-loader'
    ],
  });

  return defaultConfig;
};

[igor-dv]

@chovy did you solve the problem?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[chovy]

No, I did not solve the problem.

[igor-dv]

Adding a custom webpack config as @nickdandakis did should solve this.
Maybe @pksunkara has something else to add.

[pksunkara]

Yeah, what @nickdandakis did should work. I don't see any other issue with this.

[igor-dv]

👍

[wuweijia]

same problem

[wuweijia]

@chovy did you solve the problem?

[jrtitus]

@wuweijia I recently ran into this same problem. @nickdandakis's solution above worked for me. Just make sure you remember to yarn add --dev vue-style-loader css-loader sass-loader.

It's probably worth noting that Storybook's documentation about extend mode did not work.

[igor-dv]

Would be great if you could PR to docs your findings

[wuweijia]

@wuweijia I recently ran into this same problem. @nickdandakis's solution above worked for me. Just make sure you remember to yarn add --dev vue-style-loader css-loader sass-loader.

It's probably worth noting that Storybook's documentation about extend mode did not work.

I have fixed this problem. Thank you