Styles not being loaded, followed instructions on docs #3177
Description
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