67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
// Make CSS modules work
|
|
// https://github.com/storybookjs/storybook/issues/4306#issuecomment-517951264
|
|
const setCssModulesRule = rule => {
|
|
const nextRule = rule
|
|
const cssLoader = rule.use[1]
|
|
|
|
const nextOptions = {
|
|
...cssLoader.options,
|
|
modules: {
|
|
localIdentName: '[name]__[local]___[hash:base64:5]'
|
|
}
|
|
}
|
|
|
|
cssLoader.options = nextOptions
|
|
return nextRule
|
|
}
|
|
|
|
module.exports = async ({ config, mode }) => {
|
|
const cssRules = config.module.rules.map(rule => {
|
|
const isCssRule = rule.test.toString().indexOf('css') !== -1
|
|
let nextRule = rule
|
|
|
|
if (isCssRule) {
|
|
nextRule = setCssModulesRule(rule)
|
|
}
|
|
return nextRule
|
|
})
|
|
|
|
config.module.rules = cssRules
|
|
|
|
config.module.rules.push({
|
|
test: /\.(ts|tsx)$/,
|
|
loader: require.resolve('babel-loader'),
|
|
options: {
|
|
presets: [['react-app', { flow: false, typescript: true }]]
|
|
}
|
|
})
|
|
|
|
config.resolve.extensions.push('.ts', '.tsx')
|
|
|
|
config.node = {
|
|
fs: 'empty'
|
|
}
|
|
|
|
// Handle SVGs
|
|
// Don't use Storybook's default SVG Configuration
|
|
config.module.rules = config.module.rules.map(rule => {
|
|
if (rule.test.toString().includes('svg')) {
|
|
const test = rule.test
|
|
.toString()
|
|
.replace('svg|', '')
|
|
.replace(/\//g, '')
|
|
return { ...rule, test: new RegExp(test) }
|
|
} else {
|
|
return rule
|
|
}
|
|
})
|
|
|
|
// Use SVG Configuration for SVGR yourself
|
|
config.module.rules.push({
|
|
test: /\.svg$/,
|
|
use: ['@svgr/webpack']
|
|
})
|
|
|
|
return config
|
|
}
|