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

Created on 9 May 2018 · 5Comments · Source: storybookjs/storybook

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"

babel / webpack question / support

Source

alexiscordova

Most helpful comment

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;
};`

zhsisusie on 8 Jul 2018

👍3 🎉2

All 5 comments

If it helps, here's the output from npm run storybook to the error:

npm run storybook

> [email protected] storybook /Users/acordova/Sites/design-system-internal
> start-storybook -p 6006 -c .storybook

info @storybook/react v4.0.0-alpha.4
info 
info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
 10% building modules 2/2 modulewebpack built ff4550d22a769b9480fb in 2716ms  D ✖ ｢wdm｣: Hash: ff4550d22a769b9480fb                    
Version: webpack 4.8.1
Time: 2716ms
Built at: 2018-05-09 12:01:12
                       Asset       Size   Chunks                    Chunk Names
    static/manager.bundle.js   2.92 MiB  manager  [emitted]  [big]  manager
    static/preview.bundle.js   1.54 MiB  preview  [emitted]  [big]  preview
static/manager.bundle.js.map   3.04 MiB  manager  [emitted]         manager
static/preview.bundle.js.map   1.55 MiB  preview  [emitted]         preview
                  index.html  443 bytes           [emitted]         
                 iframe.html   2.34 KiB           [emitted]         
Entrypoint manager [big] = static/manager.bundle.js static/manager.bundle.js.map
Entrypoint preview [big] = static/preview.bundle.js static/preview.bundle.js.map
[./.storybook/config.js] 181 bytes {preview} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 423 bytes {manager} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {preview} {manager} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.02 KiB {preview} [built]
[./node_modules/@storybook/react/dist/server/config/globals.js] 472 bytes {preview} [built]
[./node_modules/@storybook/react/dist/server/config/polyfills.js] 113 bytes {preview} {manager} [built]
[./node_modules/@storybook/react/node_modules/core-js/es6/symbol.js] 131 bytes {preview} {manager} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {preview} {manager} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {preview} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {preview} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] 2.16 KiB {preview} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] 7.54 KiB {preview} [built]
[./node_modules/webpack-hot-middleware/process-update.js] 4.23 KiB {preview} [built]
[0] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js 40 bytes {manager} [built]
[1] 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 64 bytes {preview} [built]
    + 841 hidden modules

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
Child html-webpack-plugin for "iframe.html":
          Asset     Size  Chunks  Chunk Names
    iframe.html  558 KiB       0  
    Entrypoint undefined = iframe.html
    [./node_modules/@storybook/core/node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/src/server/iframe.html.ejs] 2.62 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  556 KiB       0  
    Entrypoint undefined = index.html
    [./node_modules/@storybook/core/node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/src/server/index.html.ejs] 725 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
ℹ ｢wdm｣: Failed to compile.

alexiscordova on 9 May 2018

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')

ndelangen on 9 May 2018

👍1

@ndelangen yep, you're right; I was worried it was something this simple. Fixing this caused a couple other issues to occur, but I just worked through them successfully.

alexiscordova on 9 May 2018

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');