[v4.0.0-alpha.4] Sass parsing error: Unexpected character '@'

I’m attempting to add Sass support to a new installation of Storybook, but am running into the following error:

ERROR in ./ui/components/buttons/base/_index.scss
Module parse failed: Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type.
| // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
| 
| @import 'deprecate';
| 
| /**
 @ ./ui/components/buttons/base/buttons-stories.js 11:0-24
 @ ./ui/components/storybook-stories.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

Steps to reproduce

I believe I have the appropriate loaders installed and setup properly, but the error persists. I’ve attempted to setup my webpack.config.js in two ways: Full control mode and Full control mode + default.

const path = require('path')

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    include: path.resolve(__dirname, 'ui'),
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  })

  return defaultConfig
}

const path = require('path')

module.export = (storybookBaseConfig, configType) => {
  storybookBaseConfig.module.rules.push({
    test: /\.scss$/,
    include: path.resolve(__dirname, 'ui'),
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  })

  return storybookBaseConfig
}

In both instances, I have switched use with loaders (per the docs) but the same error message appears. When I comment out @import 'deprecate' from the Sass file, the error appears on the next declaration, which is a standard CSS class declaration.

Other changes from the default setup include: .storybook/config.js

import { configure } from '@storybook/react'

function loadStories() {
  require('../ui/components/storybook-stories')
}

configure(loadStories, module)

ui/components/storybook-stories.js

/**
 * Storybook Stories
 */

export { Button } from '../components/buttons/base/buttons-stories';

Please specify which version of Storybook and optionally any affected addons that you’re running

• storybook/addon-actions: “^4.0.0-alpha.4”
• storybook/addon-links: “^4.0.0-alpha.4”
• storybook/addons: “^4.0.0-alpha.4”
• storybook/react: “^4.0.0-alpha.4”

Other installed packages

• webpack: “4.0.0”
• webpack-cli: “2.0.9”
• style-loader: “0.19.0”
• css-loader: “0.28.11”
• sass-loader: “6.0.6”

[zhsisusie]

same problem, finally i found the problem is scss file not to get matched by webpack: , I remove " include: path.resolve(__dirname, “…”)" then it works .

webpack.config.js

`const path = require(“path”); const includePath = path.resolve(__dirname, ‘…’); const genDefaultConfig = require(‘@storybook/react/dist/server/config/defaults/webpack.config.js’);

module.exports = (storybookBaseConfig, configType) => { const config = genDefaultConfig(storybookBaseConfig); config.module.rules.push( { test: /.(css|scss|sass)$/, loaders: [“style-loader”, “css-loader”, “sass-loader”], // include: path.resolve(__dirname, “…”) } ); config.module.rules.push( { test: /.(png|woff|woff2|eot|ttf|svg)$/, loader: ‘url-loader?limit=100000’ } ); return config; };`

[ndelangen]

So I think this is causing the scss file not to get matched by webpack:

include: path.resolve(__dirname, 'ui'),

Here’s an indicator you might need to add a .. in the path:

require('../ui/components/storybook-stories')