Importing CSS from node_modules #24761
Unanswered
NicholasMKim
asked this question in
Help
Replies: 1 comment
-
Same in Storybook 8 with CKEditor5 Does not work:story import type { Meta, StoryObj } from '@storybook/react'
import RichText from '@ns/rich-text'
import '@ns/rich-text/dist/style.css'
type Story = StoryObj<typeof RichText>
const meta: Meta<typeof RichText> = {
title: 'Molecules/RichText',
component: RichText,
tags: ['autodocs'],
args: {
data: 'hello from RichText',
onChange: (_, editor) => console.log(editor.getData()),
},
}
export const Default: Story = {}
export default meta Does work:css file @import '~@ns/rich-text/dist/style.css'; story import type { Meta, StoryObj } from '@storybook/react'
import RichText from '@ns/rich-text'
import './custom.css'
type Story = StoryObj<typeof RichText>
const meta: Meta<typeof RichText> = {
title: 'Molecules/RichText',
component: RichText,
tags: ['autodocs'],
args: {
data: 'hello from RichText',
onChange: (_, editor) => console.log(editor.getData()),
},
}
export const Default: Story = {}
export default meta Why? Webpack import issues? CSS does not work either in import type { StorybookConfig } from '@storybook/nextjs'
const config: StorybookConfig = {
stories: [
'../src/docs/**/*.mdx',
'../src/packages/atoms/**/*.stories.tsx',
'../src/packages/molecules/**/*.stories.tsx',
'../src/packages/organisms/**/*.stories.tsx',
'../src/packages/templates/**/*.stories.tsx',
],
staticDirs: ['../public'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
],
framework: {
name: '@storybook/nextjs',
options: {
fastRefresh: true,
strictMode: true,
builder: {
lazyCompilation: !['production', 'test'].includes(process.env.NODE_ENV),
},
},
},
core: {
disableTelemetry: true,
},
// speedup hmr workaround
typescript: {
reactDocgen: 'react-docgen',
check: false,
skipCompiler: true,
},
docs: {
autodocs: 'tag',
},
features: {
experimentalRSC: true,
},
// https://github.com/webpack/webpack/issues/3497#issuecomment-331463800
webpackFinal: (config) => {
//@ts-ignore
config.module.rules = [
{
test: /\.svg/,
oneOf: [
{
resourceQuery: /svgr/,
loader: '@svgr/webpack',
},
{
loader: 'svg-url-loader',
options: {
encoding: 'base64',
},
},
],
},
//@ts-ignore
...config.module.rules.map((rule) => {
if (
//@ts-ignore
/svg/.test(rule.test) &&
//@ts-ignore
/next-image-loader-stub/.test(rule.use?.at(0)?.loader)
) {
//@ts-ignore
return { ...rule, exclude: /\.svg$/i }
}
return rule
}),
]
return config
},
}
export default config |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi team, I just got started with the new version of Storybook. And I am not sure how to import
CSS
fromnode_modules
It works fine in the code but storybook. Can someone guide me how it should become?
Beta Was this translation helpful? Give feedback.
All reactions