From baf37a408312d8af48c9c324eb87611552013eba Mon Sep 17 00:00:00 2001 From: tai2 Date: Fri, 13 Oct 2017 12:56:32 +0900 Subject: [PATCH] Reuse webpacker loaders for storybook. --- .storybook/webpack.config.js | 59 +++++++----------------------------- config/webpacker.yml | 2 +- 2 files changed, 12 insertions(+), 49 deletions(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 86c2aac..4bf3d4e 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -12,56 +12,19 @@ const { readFileSync } = require('fs') const filePath = resolve('config', 'webpacker.yml') const config = safeLoad(readFileSync(filePath), 'utf8')[process.env.NODE_ENV] -function sassLoaders(modules) { - return [ - { loader: 'style-loader' }, - { - loader: 'css-loader', - options: { - modules, - localIdentName: '[name]__[local]--[hash:base64:5]', - } - }, - { loader: 'postcss-loader', options: { sourceMap: true } }, - 'resolve-url-loader', - { loader: 'sass-loader', options: { sourceMap: true } } - ] -} - -function extraRules() { - const tsRule = { - test: /\.tsx?$/, - exclude: /node_modules/, - loader: 'awesome-typescript-loader' - } - const moduleSassRule = { - test: /\.(scss|sass)$/i, - exclude: [ - resolve('app/assets/stylesheets'), - resolve('node_modules'), - ], - use: sassLoaders(true), - } - const sassRule = { - test: /\.(scss|sass)$/i, - include: [ - resolve('app/assets/stylesheets'), - resolve('node_modules'), - ], - use: sassLoaders(false), - } - const assetsRule = { - test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i, - use: [{ - loader: 'file-loader', - }] - } - - return [tsRule, moduleSassRule, sassRule, assetsRule] -} +const environment = require('../config/webpack/environment') module.exports = (storybookBaseConfig, configType) => { - storybookBaseConfig.module.rules.push(...extraRules()) + // Here reusing webpacker's style rules. It needs setting hmr config true in + // webpacker.yml. Otherwise ExtractTextPlugin will be used and result in runtime + // errors in storybook. + const rules = [ + environment.loaders.get('style'), + environment.loaders.get('moduleStyle'), + environment.loaders.get('typescript'), + environment.loaders.get('file'), + ] + storybookBaseConfig.module.rules.push(...rules) storybookBaseConfig.resolve.extensions.push('.ts', '.tsx', 'scss'); storybookBaseConfig.resolve.modules.unshift(resolve(config.source_path)) return storybookBaseConfig diff --git a/config/webpacker.yml b/config/webpacker.yml index e601baa..6d25062 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -40,7 +40,7 @@ development: host: localhost port: 3035 public: localhost:3035 - hmr: false + hmr: true # hmr should be set to true for storybook # Inline should be set to true if using HMR inline: true overlay: true