SCSS loading with Create React app

[morrigan]

Using SASS as in example doesn't seem to be working and produces this error:

ERROR in ./src/style/index.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--7-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-5-4!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was "var content = requi"
        on line 1 of /home/xx/src/style/index.scss
>> var content = require("!!../../node_modules/css-loader/dist/cjs.js!../../nod
   ^

 @ ./src/style/index.scss 1:14-412 20:4-31:5 23:25-423
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

I've created fresh project with Create React app in TypeScript. Line 1 contains @import

My .storybook/config.js contains only this:

import '../src/style/index.scss'

EDIT: Also hot reloading doesn't seem to work at all with this.

[danielo515]

I think the problem is that the module node-sass is a dev-dependency while they actually use it. At least I'm getting that error on the console.

[harsandevhunt]

Any fixes?

[digitaltim-de]

Same error here

[peiris]

Same here. Looking for answers

[sksethi25]

@peiris @morrigan do you have any webpack configs in main.js?

[peiris]

@peiris @morrigan do you have any webpack configs in main.js?

Sorry for not replying earlier. I was able to solve the issue on a fresh storybook installation.

[sksethi25]

@peiris i had some webpack config, so i guess that was messing up with react-scripts(create-react-app) webpack configs.once i remove by storybook webpack config.it worked fine.

[t596502]

Same error here

[sksethi25]

@t596502 do you have any webpack configuration in storybook setting/or main.js in .storybook folder?

[deckardd]

Same error for me using the example or trying @storybook/preset-scss

main.js

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-scss',
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-storysource'
  ]
};

Error

ERROR in ./node_modules/react-bulma-components/lib/components/box/box.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/react-scripts/node_modules/style-loader!./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--8-oneOf-5-3!./node_modules/react-bulma-components/lib/components/box/box.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
        on line 1 of node_modules/react-bulma-components/lib/components/box/box.sass
>> 

   ^

 @ ./node_modules/react-bulma-components/lib/components/box/box.sass 2:26-393 43:4-64:5 46:18-385
 @ ./node_modules/react-bulma-components/lib/components/box/index.js
 @ ./src/components/Bulma.stories.js
 @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

[sksethi25]

@deckardd in my case webpack configuration was not there and i was not using cra that provide inbuilt webpack conf and with cra i have to install node-sass module to fix.dont know how exactly it got fixed.

[t596502]

@t596502 do you have any webpack configuration in storybook setting/or main.js in .storybook folder? I have solved storybook/main.js

const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.tsx'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-links',
],
webpackFinal: async (config, { configType }) => {
// new code
config.module.rules = config.module.rules.filter(rule => {
if(rule.test) {
return !rule.test.test(".scss")
}
});

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

return config;

}, };

[sksethi25]

@t596502 are you using create-react-app(react-scripts) in your project?

[philyoosays]

I am having the same issue.

./.storybook/webpack.config.js

const path = require('path');

module.exports = {
   module: {
      rules: [
        {
          test: /\.scss$/i,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: true
              },
            },
            {
              loader: 'sass-loader',
              options: {
                importLoaders: true,
                indentedSyntax: true
              }
            }
          ],
          include: path.resolve(__dirname, '../'),
        }
      ]
   }
}

The error (appears once for every scss file)

ERROR in ./components/ui_input/Searchbar/searchbar.scss (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--8-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--8-4!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/sass-loader/dist/cjs.js??ref--12-2!./components/ui_input/Searchbar/searchbar.scss)
Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of /Users/philyoo/workspace/BPNYC-common/components/ui_input/Searchbar/searchbar.scss
>> var api = require("!../../../node_modules/style-loader/dist/runtime/injectSt
   ^

 @ ./components/ui_input/Searchbar/searchbar.scss 2:14-487 21:1-42:3 22:19-492
 @ ./components/ui_input/Searchbar/index.jsx
 @ ./components/ui_component/Transfer/TransferList.jsx
 @ ./components/ui_component/Transfer/index.jsx
 @ ./stories/Transfer.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

I am not using create-react-app, just regular React components transpiled with webpack.

[sksethi25]

@philyoosays try installing node-saas

[JosieGittingTheHub]

Getting the same error. Using CRA and the storybook scss preset

[simon-tr]

I also got the same error. Fixed it by removing the @storybook/preset-scss addon from my .storybook/main.js:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
}

It collides with @storybook/preset-create-react-app. This is also logged as a warning right at the beginning of my logs:

WARN `@storybook/preset-scss` may not be compatible with `@storybook/preset-create-react-app`

[QuevedoIB]

Having the same issue, trying to use CRA preset with SCSS preset and getting the exact same error. Did anyone to get them both working together somehow? Or how are we supposed to have a CRA with sass?

@simon-tr You removed the SCSS preset and managed to get sass working with the CRA preset?

[simon-tr]

@QuevedoIB yes, the CRA preset contains an SCSS loader.

I still ran into problems with a global import in my .storybook/preview.js:

// ...
import '!style-loader!css-loader!sass-loader!../src/styles/app.scss'

The build was hanging at around 67-69% every time, until I removed the loaders from that file path:

// ...
import '../src/styles/app.scss'

Note: I'm using the latest versions of the storybook packages, and of react-scripts. I also didn't need to install @storybook/preset-scss, css-loader, sass-loader, or style-loader because these loaders come with react-scripts.

[derpdead]

Having same problem. I am using exported SCSS variables to JS:

_variables/_colors.scss

$GREEN_DARK: #00A979;

_js-variables/_colors.scss

:export {
   GREEN_DARK: $GREEN_DARK;
}

In preview.js at the top of file I am doing: import '!style-loader!css-loader!sass-loader!./reset-storybook.scss'; and in main.js in webpack config:

        config.module.rules.push({
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader',
                {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: path.resolve(__dirname, '../modules/@ergonode/core/src/assets/scss/main.scss'),
                    },
                },
            ],
            include: path.resolve(__dirname, '../'),
        });

ERROR

ERROR in ./modules/@ergonode/core/src/assets/scss/_js-variables/colors.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-resources-loader/lib/loader.js??ref--10-3!./modules/@ergonode/core/src/assets/scss/_js-variables/colors.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of modules/@ergonode/core/src/assets/scss/_js-variables/colors.scss
>> var api = require("!../../../../../../../node_modules/style-loader/dist/runt
   ^

[Kazerian]

I also got the same error. Fixed it by removing the @storybook/preset-scss addon from my .storybook/main.js:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
}

It collides with @storybook/preset-create-react-app. This is also logged as a warning right at the beginning of my logs:

WARN `@storybook/preset-scss` may not be compatible with `@storybook/preset-create-react-app`

Thanks a ton @simon-tr I am also using CRA and scss. It is mentioned in their documentation to use

module.exports = { addons: ['@storybook/preset-scss'], };

But it breaks if I add `'@storybook/preset-scss'` to the main.js
So, I am guessing that `@storybook/preset-create-react-app` already contains preset for scss if you are already using CRA , hence, you don't need to add `'@storybook/preset-scss'` addon.

[t596502]

@t596502 are you using create-react-app(react-scripts) in your project?

yes!

[pedroRelvas]

Did anyone solved it? Got the same problem here...

[philyoosays]

@philyoosays try installing node-saas

Already installed.

[HamidReazaNikoonia]

const path = require("path");
module.exports = {
  stories: ["../src/**/*.stories.[tj]s[x]"],
  addons: [
    "@storybook/addon-actions/register",
    "@storybook/addon-links",
    "@storybook/addon-knobs/register",
    "@storybook/addon-storysource/register",
    "storybook-addon-styled-component-theme/dist/register",
    "@storybook/addon-viewport/register",
  ],
  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.

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve("babel-loader"),
      options: {
        presets: [["react-app", { flow: false, typescript: true }]],
      },
    });

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

    config.resolve.extensions.push(".ts", ".tsx");

    config.module.rules.push({
      test: /\.stories\.tsx?$/,
      loaders: [require.resolve("@storybook/source-loader")],
      enforce: "pre",
    });

    config.module.rules.push({
      test: /\.module\.scss$/,
      sideEffects: false,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: true,
          },
        },
        "sass-loader",
      ],
    });

    return config;
  },
};

[hadnet]

I'm getting the same error. I followed this doc to add sass support but obviously it's not working well. But commenting @storybook/preset-create-react-app SB works again so I don't know what I'm missing here. I'm using Storybook 6 and CRA 4 and installed node-sass@4.14.1 (I'm using 4.14.1 because the CRA node-sass@5 issue).

[Ruttmann]

I'm using Storybook 6.1.3. Followed the instructions from this link. Didn't worked and I was receiving the same error as seen above. Tried to uninstall everything related to the instructions of the mentioned link and just import the .scss in preview.js and it worked like a charm. I guess that the SCSS preset isn't necessary anymore for version 6.

[tarikhamilton]

I still need to use webpackFinal to compile Sass using CRA4, so I think the preset doesn't work with Storybook 6.1.x (or less? That's just what I'm on), at least not for compiling SCSS. I'm actually pretty unfamiliar with this package and I think it was included when I initiated a new Storybook on a new CRA project.

Edit: Found the definitive answer lol.

const incompatiblePresets = [
  '@storybook/preset-scss',
  '@storybook/preset-typescript',
];

Perhaps, if this is within the scope of presets, it should maybe diff webpack with the webpackFinal one and see if there is a conflicting rule or maybe a warning if 'sass-loader' is found with a css rule. It seems oddly specific, but I feel like this is an easy issue to run into without an immediately obvious answer.

I'm down to contribute, if what I suggested makes sense, if any maintainer sees this...

[emmanuelonah]

This solves the issue: https://github.com/nirus/storybook-issue/blob/597a4df091362dbd61422d7033ef210bdd146f20/.storybook/main.js#L13