soso-tip
soso-tip copied to clipboard
storybook config (feat. yarn2)
postcss 8์ด ๋ฆด๋ฆฌ์ฆ๋๋ฉด์ ๋ํ๋์๊ฐ ์ฌ๊ธฐ์ ๊ธฐ ์ข ์ข ..๊นจ์ง.. ํนํ ์นํฉ4 ๋ชจ๋๋ก ๋๋ฆฌ๋ฉด ์ต์ ๋ํ๋์์ ๊ฑฐ์ง ํธํ์ด ์๋๋๋ฐ..
-
@storybook/addon-postcss
๋ก postcss๋ฒ์ ์ ํจํค์ง ๋ฒ์ ์ผ๋ก ์จ์ฃผ๊ณ - storybook/scss๋ฅผ ์ฌ์ฉํด์ฃผ๊ณ
- (if yarn2) ์์กด์ฑ์ ์ข ๋ช ์ํด์ฃผ๋ฉด ๋๋ค.
# yarn2
packageExtensions:
"@storybook/builder-webpack4@*":
dependencies:
"sass-loader": "^10.1.1"
"node-sass": "^5.0.0"
const { resolve } = require('path');
module.exports = {
stories: ['../src/**/*.stories.tsx'],
addons: [
'@storybook/addon-essentials',
{
name: '@storybook/preset-scss',
sassLoaderOptions: {
includePaths: 'your_path'
}
},
{
name: '@storybook/addon-postcss',
options: {
rule: {
test: /\.scss$/,
sideEffects: true,
},
postcssLoaderOptions: {
implementation: require('postcss'),
config: 'your_path'
},
},
},
],
webpackFinal: async baseConfig => {
const { module = {} } = baseConfig;
const rules = (baseConfig.module.rules || []).filter(f => {
if (f.test != null) {
return f.test.toString() !== '/\\.scss$/' && f.test.toString() !== '/\\.(ts|tsx)$/';
}
return true
});
return {
...baseConfig,
module: {
...module,
rules: [
...rules,
{
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
configFile: 'your_path'
},
},
]
}
};
},
};