I'm currently facing an issue with Storybook. Everything is working great in my app, with webpack. Storybook seems to have issue with my configuration.
Here's my webpack.config.js :
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: __dirname
},
{
test: /\.scss$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"},
{loader: "sass-loader",
options: {
includePaths: [__dirname]
}
}]
},
Storybook have issue with parsing the scss file, do I need to create a specific webpack.config.js for Storybook to solve this?
In my main app I'm importing my scss file this way : import './styles/base.scss'
It worked just by adding a webpack.config.js quite similar to my existing one :
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../')
},
{ test: /\.css$/,
loader: 'style-loader!css-loader',
include: __dirname
},
{
test: /\.(woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
name: 'fonts/[hash].[ext]',
limit: 5000,
mimetype: 'application/font-woff'
}
}
},
{
test: /\.(ttf|eot|svg|png)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[hash].[ext]'
}
}
}
]
}
}