Styles not being loaded, followed instructions on docs

[christopher-francisco]

Issue details

I'm using webpack 2.4.1. Followed the instructions in custom webpack config to load SCSS files.

Now, here's the thing. My app loads a single styles.scss files, which @imports from node_modules and relative partial scss files:

@import '~react-virtualized/styles.css';
@import './_tables';

The styles coming from react-virtualized work (I see a change when commenting on/off the import line). But the one from ./_tables don't. The styles are not in the page.

I even tested adding a non existing @import call inside _tables.scss, @import './non-existing' to see if it crashes, and it does crash, so at the very least the file is being read.

In the actual app, the loading is done in the src/index.js file.

// index.js
import React from 'react';
import { render } from 'react-dom';

import App from './App';
import './assets/styles.scss';
...
...
render(<App />, mount);

In the storybook, I don't really know where to load it, so I'm doing directly in the index.story.js file: import '../src/assets/styles.scss';.

As I said before, the .storybook/webpack.config.js is the same as the one on the docs page:

...
module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, '../')
      },
...

Any idea on what could be missing?

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

• @storybook/react 3.3.15

Affected platforms

• Chrome 65, MacOS High Sierra

[danielduan]

I believe the node_modules are excluded from webpack by default. You will need to remove that entry in the excludes list.

[christopher-francisco]

@danielduan I'm sorry I didn't follow, could you provide a code line to see what is it, please?

[danielduan]

include: path.resolve(__dirname, '../')
should have node_modules in it

[christopher-francisco]

include: ['node_modules', path.resolve(__dirname, '../')] you mean both paths? or only one

[danielduan]

depends on where your .scss files are located. if they're in both, then you need both.

[stale]

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]

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!