Storybook: Loading global SCSS

[taurean]

I'm having some issues importing global SCSS files using a pretty bare bones storybook set up inside of an angular project.

the storybook config:

import { configure } from '@storybook/angular';
import '../src/test-scss/test.scss';

// automatically import all files ending in *.stories.ts
const req = require.context('../src/app/', true, /.stories.ts$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

the webpack config for storybook:

const path = require('path');

module.exports = async ({
  config,
  mode
}) => {
  config.module.rules.push({
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader?indentedSyntax=false'],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

the test scss file I”m trying to load:

body {
    background: green !important;
}

and lastly, the error I’m getting:

ERROR in ./src/test-scss/test.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

body {
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"…

Possibly related?:
I didn't find any solutions here that worked for me though

3618

3814

[taurean]

figured it out, it was an issue with storybook clashing with my existing apps postcss configuration I think.

updated webpack config:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({
  config,
  mode
}) => {
  // `mode` 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.

  config.module.rules = config.module.rules.filter(rule => !rule.test.test(".scss"));

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

  // Return the altered config
  return config;
};

[t596502]

same error
solved
thanks

[jimsheen]

In the current version of storybook @storybook/[email protected] the default webpack config is slightly different

figured it out, it was an issue with storybook clashing with my existing apps postcss configuration I think.

updated webpack config:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({
  config,
  mode
}) => {
  // `mode` 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.

  config.module.rules = config.module.rules.filter(rule => !rule.test.test(".scss"));

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

  // Return the altered config
  return config;
};

Thanks so much for this! However, In the current version of storybook @storybook/[email protected] the default webpack config is slightly different so I tweaked the code a bit here :) Hope this helps someone!

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

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../app/frontend/components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@storybook/preset-scss'
  ],
  webpackFinal: async (config) => {
    // this sets the default path for modules
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../app/frontend"),
    ];

    config.module.rules.map(rule => {
      if (rule.test instanceof RegExp && rule.test.toString() === '/\\.s[ca]ss$/') {
        rule.use.push({
          loader: require.resolve('sass-resources-loader'),
          options: {
            resources: [
              path.resolve(__dirname, '../app/frontend/styles/base/_variables.scss')
            ]
          }
        })
      }
      return rule
    })
    return config;
  },
}