Error importing scss file

[maxlibin]

need help with "You may need an appropriate loader to handle this file type."

in compontent file:
import "../src/components/Header.scss";

here is my webpack config:

const BASE_CSS_LOADER = "css?sourceMap&-minimize";

webpackConfig.module.loaders.push({
  test: /\.scss$/,
  exclude: null,
  loaders: [
    "style",
    BASE_CSS_LOADER,
    "postcss",
    "sass?sourceMap",
  ],
});
webpackConfig.module.loaders.push({
  test: /\.css$/,
  exclude: null,
  loaders: [
    "style",
    BASE_CSS_LOADER,
    "postcss",
  ],
});
webpackConfig.sassLoader = {
  includePaths: project.paths.client("styles"),
};

// File loaders
/* eslint-disable */
webpackConfig.module.loaders.push(
  { test: /\.woff(\?.*)?$/,  loader: "url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff" },
  { test: /\.woff2(\?.*)?$/, loader: "url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2" },
  { test: /\.otf(\?.*)?$/,   loader: "file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype" },
  { test: /\.ttf(\?.*)?$/,   loader: "url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream" },
  { test: /\.eot(\?.*)?$/,   loader: "file?prefix=fonts/&name=[path][name].[ext]" },
  { test: /\.svg(\?.*)?$/,   loader: "url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml" },
  { test: /\.(png|jpg)$/,    loader: "url?limit=8192" }
)
/* eslint-enable */

// ------------------------------------
// Finalize Configuration
// ------------------------------------
// when we don't know the public path (we know it only when HMR is enabled [in development]) we
// need to use the extractTextPlugin to fix this issue:
// http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
if (!__DEV__) {
  debug("Applying ExtractTextPlugin to CSS loaders.");
  webpackConfig.module.loaders.filter((loader) =>
    loader.loaders && loader.loaders.find((name) => /css/.test(name.split("?")[0]))
  ).forEach((loader) => {
    const first = loader.loaders[0];
    const rest = loader.loaders.slice(1);
    loader.loader = ExtractTextPlugin.extract(first, rest.join("!"));
    delete loader.loaders;
  });

  webpackConfig.plugins.push(
    new ExtractTextPlugin("[name].css", {
      allChunks: true,
    })
  );
}

module.exports = webpackConfig;

[tmeasday]

Hi @maxlibin -- have you seen this documentation: https://getstorybook.io/docs/react-storybook/configurations/custom-webpack-config

It sounds like you need to apply the first part of your config to storybook's config, in a similar way to the "Simple Mode" example. You could extract it to a common JS file to do so.

[maxlibin]

@tmeasday I have this webpack.config.js in .storybook

[tmeasday]

@maxlibin -- I tried to reproduce the problem here: https://github.com/tmeasday/storybook-708, but it seems to be working.

Note this is an app created with create-react-app so the SCSS doesn't actually work in the main app (no way to modify the webpack config), but the SCSS is working just fine in storybook.

Any ideas about what's different? Maybe you could fork the above and try and reproduce there?

[gthomas-appfolio]

I was also seeing issues with the storybook 2->3 upgrade. We use scss and cssmodules (without extract text plugin) and do not use create-react-app. The loaders we specify in .storybook/webpack.config.js seemed to be ignored, or at least the errors are identical if we have the custom webpack.config.js or not. This approach worked with storybook 2.

The fix was to add the css/scss loaders to the exported module.rules array :

  module: {
    rules: [
      {
        test: /\.s?css$/,
        loader: 'style-loader!css-loader?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader'
      }
    ]
  }
};

Previously, we had the older (but still valid) loaders array. I think do the config merging/overrides this was getting ignored due to storybook (correctly) using rules. Hope this helps anyone in our situation.

[tmeasday]

@maxlibin did you ever sort it out? I might close this issue as @gthomas-appfolio's instructions are hopefully the solution for anyone else finding this, but we can reopen it if you haven't been able to solve the problem.

[joscha]

This issue has been fixed in 3.1.7 via #1363 - extract-text-webpack-plugin can now be used again in a standard storybook build.

[MohamedHamed83]

I had the same issue and i fix it by adding scss loader to .storybook>webpack.config.js
{
test: /.scss$/,
exclude: /node_modules/,
loaders: [{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
postcss: [
precss(),
autoprefixer(),
mqpacker(),
],
},
},
{ loader: 'sass-loader' }
],
}

[nataliepan]

yarn add -D react-scripts worked for me

[wangjitai]

yarn add -D react-scripts worked for me

Thanks @nataliepan , I tried almost all methods through research online, only your answer is suitable for me!