스토리북에 .less/.scss 전역 스타일 추가

스토리북 도구를 반응 앱과 통합하려고 합니다. 내 앱은 .less 스타일을 사용하고 있으며 모든 스타일이 작성된 단일 파일이 있습니다(비록 이 방법을 좋아하지는 않지만 :))

It works for v6 but I am not sure about lower versions. You guys can give it a try.

스토리북을 성공적으로 설치하면 main.js 폴더에 두 개의 파일( preview.js 및 .storybook )이 있습니다. 우리가 알고 있듯이 main.js는 스토리북의 설정 파일이고 preview.js는 스토리의 설정 파일입니다.

아이디어는 스토리북에 Webpack 구성을 포함하는 것입니다.
질문: 어떻게 할 수 있습니까?
답변: main.js 파일 사용 중

1 단계:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    '@storybook/preset-scss'
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      // this is for both less and scss
      test: /.*\.(?:le|c|sc)ss$/,
      loaders: [
        'style-loader',
        'css-loader',
        'less-loader', // if scss then add 'sass-loader'
      ]
    });
    config.plugins.push(new MiniCssExtractPlugin({
      filename: '[name]-[contenthash].css',
      chunkFilename: '[id]-[contenthash].css',
    }));
    return config;
  },
}

여기config는 기존 스토리북의 웹팩 설정 대상이다. 규칙과 플러그인을 이 config 개체에 푸시하고 있습니다.

2 단계:

preview.js 파일에 아래 줄을 포함하십시오.
less:import '!style-loader!css-loader!less-loader!../YOUR_LESS_FILE.less';scss:import '!style-loader!css-loader!sass-loader!../YOUR_LESS_FILE.scss';
그게 다야 이제 스토리북을 실행하고 변경 사항을 미리 볼 수 있습니다 :)

추신: github 스레드에 대한 이 답변에 대해 Bastien에게 감사의 말을 전하고 싶습니다.
https://github.com/storybookjs/storybook/issues/6364#issuecomment-485651328

또한 스토리북에 대한 멋진 튜토리얼을 제공한 @codevolution youtube 채널에도 감사드립니다.