83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
|
const path = require("path")
|
||
|
|
|
||
|
|
const toPath = (_path) => path.join(process.cwd(), _path)
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
|
||
|
|
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
|
||
|
|
|
||
|
|
webpackFinal: async (config, { configType }) => {
|
||
|
|
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
|
||
|
|
// You can change the configuration based on that.
|
||
|
|
// 'PRODUCTION' is used when building the static version of storybook.
|
||
|
|
|
||
|
|
// Added to support PostCSS v8.X
|
||
|
|
/**
|
||
|
|
* CSS handling, specifically overriding postcss loader
|
||
|
|
*/
|
||
|
|
// Find the only Storybook webpack rule that tests for css
|
||
|
|
const cssRule = config.module.rules.find((rule) =>
|
||
|
|
"test.css".match(rule.test)
|
||
|
|
)
|
||
|
|
// Which loader in this rule mentions the custom Storybook postcss-loader?
|
||
|
|
const loaderIndex = cssRule.use.findIndex((loader) => {
|
||
|
|
// Loaders can be strings or objects
|
||
|
|
const loaderString = typeof loader === "string" ? loader : loader.loader
|
||
|
|
// Find the first mention of "postcss-loader", it may be in a string like:
|
||
|
|
// "@storybook/core/node_modules/postcss-loader"
|
||
|
|
return loaderString.includes("postcss-loader")
|
||
|
|
})
|
||
|
|
// Simple loader string form, removes the obsolete "options" key
|
||
|
|
cssRule.use[loaderIndex] = "postcss-loader"
|
||
|
|
|
||
|
|
// ignore *.po files
|
||
|
|
config.module.rules.push({
|
||
|
|
test: /\.(po)$/,
|
||
|
|
use: [
|
||
|
|
{
|
||
|
|
loader: require.resolve("ignore-loader")
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
// SVG
|
||
|
|
// Needed for SVG importing using svgr
|
||
|
|
const indexOfRuleToRemove = config.module.rules.findIndex((rule) =>
|
||
|
|
rule.test?.toString().includes("svg")
|
||
|
|
)
|
||
|
|
|
||
|
|
config.module.rules.splice(indexOfRuleToRemove, 1, {
|
||
|
|
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
|
||
|
|
loader: require.resolve("file-loader"),
|
||
|
|
options: {
|
||
|
|
name: "static/media/[name].[hash:8].[ext]",
|
||
|
|
esModule: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
config.module.rules.push({
|
||
|
|
test: /\.svg$/,
|
||
|
|
use: [
|
||
|
|
{
|
||
|
|
loader: "@svgr/webpack",
|
||
|
|
options: {
|
||
|
|
svgo: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
return {
|
||
|
|
...config,
|
||
|
|
resolve: {
|
||
|
|
...config.resolve,
|
||
|
|
alias: {
|
||
|
|
...config.resolve.alias
|
||
|
|
// "@emotion/core": toPath("node_modules/@emotion/react"),
|
||
|
|
// "@emotion/styled": toPath("node_modules/@emotion/styled"),
|
||
|
|
// "emotion-theming": toPath("node_modules/@emotion/react")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|