-
scss 에서 global styles가 스토리북에 적용안되는 문제코드잇 2024. 5. 3. 16:22
Storybook에서 SCSS로 작성된 전역 스타일을 적용하려면, .storybook/preview.js 파일에서 해당 SCSS 파일을 import해야 합니다.
예를 들어, global.scss라는 전역 스타일 파일이 있다면, 다음과 같이 import할 수 있습니다:import '../styles/global.scss';
이렇게 하면, Storybook에서 global.scss 파일의 스타일이 적용됩니다.
또한, SCSS 파일을 처리하려면 Storybook의 webpack 설정을 수정해야 합니다. .storybook/main.js 파일에서 webpackFinal 설정을 다음과 같이 추가하세요:
이제 Storybook에서 SCSS로 작성된 전역 스타일을 적용할 수 있습니다.module.exports = { // ... webpackFinal: async (config) => { config.module.rules.push({ test: /\\.scss$/, use: ['sass-loader'], include: path.resolve(__dirname, '../'), }); return config; }, };
이렇게 하면, Storybook에서 SCSS 파일을 처리할 수 있습니다. style-loader, css-loader, sass-loader는 각각 스타일을 로드하고, CSS를 처리하고, SCSS를 CSS로 컴파일하는 역할을 합니다.
이러한 로더들은 개발 의존성으로 설치해야 합니다:npm install --save-dev sass-loader
*** 내 프로젝트에서는 sass만 쓴다. sass-loader만 설치하고 적용하기!!- 예시
.storybook > preview.ts import type { Preview } from '@storybook/react'; import '../styles/global-styles/global.scss'; const preview: Preview = { parameters: { controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, }; export default preview;
.storybook > main.ts import type { StorybookConfig } from '@storybook/nextjs'; import path from 'path'; const config: StorybookConfig = { stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@storybook/addon-onboarding', '@storybook/addon-links', '@storybook/addon-essentials', '@chromatic-com/storybook', '@storybook/addon-interactions', ], framework: { name: '@storybook/nextjs', options: {}, }, docs: { autodocs: 'tag', }, staticDirs: ['../public'], webpackFinal: async (config) => { if (!config.module || !config.module.rules) { return config; } config.module.rules = [ ...config.module.rules.map((rule) => { if (!rule || rule === '...') { return rule; } if (rule.test && /svg/.test(String(rule.test))) { return { ...rule, exclude: /\\.svg$/i }; } return rule; }), { test: /\\.svg$/, use: ['@svgr/webpack'], }, >>>> 여기 { test: /\\.scss$/, use: ['sass-loader'], include: path.resolve(__dirname, '../'), }, >>>>>>>> ]; return config; }, }; export default config;
'코드잇' 카테고리의 다른 글
무한스크롤 커스텀 hook (0) 2024.06.10 [BLOB] 프로젝트 회고 (0) 2024.06.09 [리팩토링] 클라이언트에서 쿠키 설정 js-cookie (1) 2024.03.30 [Taskify] 프로젝트 회고 (0) 2024.03.26 [오픈마인드] 프로젝트 회고록 (1) 2024.02.01