awzx awzx -3 years ago 291
Sass (Sass) Question

import scss file with Storybook

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'

Answer Source

I 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]'
          }
       }
     }
   ]
 }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download