Storybook: css/sass loader not working with regular import, but fine with inline loaders.

[Vincent-Alexandrine]

import css/scss: webpack config aren't working, but inline loaders does the job.

I have loaders in my webpack.config.js, and are similar to my current project ones (where it works)
importing this way:
require('./_styles.scss');
Throws You may need an appropriate loader to handle this file type.

But doing:
require ('!style-loader!css-loader!postcss-loader!sass-loader!./_style.scss');
It works.

It is happening either in the .storybook/config.js, or any story file.
I expect the import without the inline loaders to be working. Changing my loaders for having simple ones, or importing even a .css file doesn't work either.
Instead, only the inline-loaders seem to work.

Screenshots / Screencast / Code Snippets (Optional)

package.json

    "webpack": "^4.13.0",
    "@storybook/react": "^3.4.10",

webpack.config.js

{
  resolve: {
    extensions: ['.js', '.json', '.jsx', '.min.css', '.css', '.scss'],
    modules: [path.resolve(__dirname, '../../src'), 'node_modules'],
    alias: {
      Src: path.resolve(__dirname, '../src'),
      common: path.resolve(__dirname, '../src/common'),
    }
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              minimize: true,
              importLoaders: 1,
            }
          }, {
            loader: 'postcss-loader', // translates CSS into CommonJS
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: () => [
                autoprefixer({ browsers: ['last 2 versions', '> 2%', '> 5% in DE', 'Chrome 44', 'iOS > 8', 'ie > 10'], grid: true }),
              ],
            },
          }, {
            loader: 'sass-loader',
            options: {
              // includePaths: ['node_modules']
              outputStyle: 'compressed',
              sourceMap: true,
            }
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
    ],
  },
};

[igor-dv]

Is this webpack.config.js located in .storybook dir ?

[Vincent-Alexandrine]

Hey @igor-dv , yes it is what is exported there, forgot to precise. But my concern is that even changing the loaders for having just style-loader and css-loader for instance, it would throw the same error message.
my repo is like this:

  - .storybook/
  - stories/
  - src/
  - webpack/
  - .babelrc
  - .browserlistrc
  - .eslintrc
  - .postcss.config.js

[igor-dv]

What if you change "module.loaders" to "module.rules"?

[ndelangen]

module.loaders is deprecated in webpack new property is module.rules:
https://webpack.js.org/configuration/module/#module-rules

Storybook only merges and uses rules, other properties are ignored.

[andreassavva]

I have the same issue, I am using module.rules. I have been debugging with --debug-webpack and I see the loaders are loaded as they should, the path .storybook is included but I still get an Unexpected token error in the beginning of the first .scss file. What can the problem be?

[chriscarpenter12]

I too am having this same exact issue. I can't get scss files to load using the custom config, but work fine when using the inline loaders.

[ndelangen]

@andreassavva or @chriscarpenter12 I'd like to be able to reproduce this locally, could you help me by setting up a reproduction repo?

[crobinson42]

how did you guys solve this? I'm having an issue with the same problem and .scss files now

[crobinson42]

I fixed with custom webpack

const common = require('../config/webpack.common')

module.exports = async ({ config, mode }) => {
  const ourWebpack = common(mode || 'development')

  // we want our loaders
  config.module = ourWebpack.module
  // we want our custom resolve/aliases
  config.resolve = ourWebpack.resolve

  return config
}

[sandwichsudo]

.storybook/webpack.config.js

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.

  // Make whatever fine-grained changes you need
  const extraRules = [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader", // compiles Sass to CSS
                }]
            }
        ];
   config.module.rules.push(...extraRules);

  // Return the altered config
  return config;
};

[charCodelet]

Good lord! This worked for me! Thanks!

[vivek-pal]

This worked for me! Thanks!