Storybook: Cannot parse scss files with default vue-cli webpack config. Unexpected character

[sanyashvets]

Hello
I cant get my styles work in storybook from default vue-cli webpack config.
I tried to make a custom webpack config, but it seems doesnt work for me: throws even more different errors

Webpack with default vue-cli config throws errors like:

ERROR in ./src/assets/bootstrap.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "variables";

I`m using:

• webpack 3.11.0
• "@storybook/vue": "^3.4.3"
• "vue-loader": "^13.3.0"

full error log, if it helps:

info @storybook/vue v3.4.3
info 
=> Loading custom .babelrc
=> Loading custom addons config.
=> Using default webpack setup based on "vue-cli".
webpack built f522c0d3949a4154f37b in 9046ms                                              
Hash: f522c0d3949a4154f37b
Version: webpack 3.11.0
Time: 9046ms
                       Asset       Size  Chunks                    Chunk Names
    static/manager.bundle.js    4.69 MB       0  [emitted]  [big]  manager
    static/preview.bundle.js     2.9 MB       1  [emitted]  [big]  preview
static/manager.bundle.js.map    5.74 MB       0  [emitted]         manager
static/preview.bundle.js.map     3.4 MB       1  [emitted]         preview
                  index.html    1.21 kB          [emitted]         
                 iframe.html  839 bytes          [emitted]         
  [48] ./node_modules/global/window.js 232 bytes {0} {1} [built]
 [279] ./node_modules/@storybook/vue/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
 [280] ./node_modules/core-js/es6/symbol.js 131 bytes {0} {1} [built]
 [298] ./node_modules/core-js/fn/array/iterator.js 107 bytes {0} {1} [built]
 [501] ./node_modules/@storybook/vue/dist/client/index.js 773 bytes {1} [built]
 [718] ./node_modules/@storybook/ui/dist/index.js 2.43 kB {0} [built]
 [803] multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js 52 bytes {0} [built]
 [804] ./.storybook/addons.js 392 bytes {0} [built]
 [805] ./node_modules/@storybook/addon-storysource/register.js 38 bytes {0} [built]
[1049] ./node_modules/@storybook/addon-actions/register.js 38 bytes {0} [built]
[1273] ./node_modules/@storybook/core/dist/client/manager/index.js 423 bytes {0} [built]
[1448] multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {1} [built]
[1449] ./node_modules/@storybook/vue/dist/server/config/globals.js 103 bytes {1} [built]
[1450] ./node_modules/webpack-hot-middleware/client.js?reload=true 7.72 kB {1} [built]
[1462] ./.storybook/config.js 729 bytes {1} [built]
    + 1575 hidden modules

ERROR in ./src/assets/variables.scss
Module parse failed: Unexpected character '#' (1:4)
You may need an appropriate loader to handle this file type.
| $w: #fff;
| $b: #000;
| $body-bg: #f2f1ed;
 @ ./src/stories/st-grid.stories.js 9:0-35
 @ ./src/stories .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

ERROR in ./src/assets/style.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "./variables";
| * {
|   margin: 0;
 @ ./src/stories/st-grid.stories.js 15:0-31
 @ ./src/stories .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

ERROR in ./src/assets/bootstrap.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "variables";
| 
| @import "~bootstrap/scss/mixins/text-truncate";
 @ ./src/stories/st-grid.stories.js 13:0-35
 @ ./src/stories .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/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  568 kB       0  
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/vue/dist/server/iframe.html.ejs 1.23 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  569 kB       0  
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/vue/dist/server/index.html.ejs 1.7 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

[igor-dv]

How does your extended webpack.config.js look like?

[sanyashvets]

I just coped an examples from docs. Tried all of them, and then changed the paths, if I received a "not found" error

[igor-dv]

From the error above I can understand that the sass-loader was not applied at all.

Try something like this:

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    use: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')],
  });

  return defaultConfig;
};

also, make sure that all of the loaders are installed.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!