Introduction

This is a template app created using Create-react-app with Storybook and SCSS enabled.

It also includes bootstrap as default styling framework.

Scripts

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm run storybook

Launch storybook server at http://localhost:6006.

IMPORTANT:

Due to this issue, you need to change the image url in src/assets/style/_images.scss before running storybook.

// background: center / cover no-repeat url(../images/logo-ANSWER.svg);
// For storybook ↓
background: center / cover no-repeat url(/src/assets/images/logo-ANSWER.svg);

This is a workaround.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Build the project into build folder.

For more information please refer to official Create-react-app website.

Folder Structure

Most part of the structure is the same with Create-react-app except for some extra folders:

• src/assets/images/: Contains images.

• src/assets/style/: Contains general stylesheets that can be in the whole site, including variables or global settings.

  • configs/: for variables and other settings.
  • utils/: for utilities such as mixins.

• src/index.scss: The unified entry of all scss stylesheets, which is included in index.js in place of the original index.css, whose content is moved to src/assets/style/configs/_base.scss.

• src/components: Contains js/jsx components and corresponding stylesheets (only used by that component).

• src/stories: Examples from Storybook. Could be removed.

Notice about SCSS loader

Create-react-app defaultly use node-sass to build and import scss file. There is no problem directly importing scss files in js files like this:

import './style.scss';

However, for Storybook, the default preset for scss will install the latest style-loader/css-loader/scss-loader depending on webpack 5, which is not supported by current Storybook(although it has beta support now) and Create-react-app. Therefore, after installing the preset, those loaders have to be downgraded to webpack-4-compatible versions manually.

    // the latest versions that are compatible with webpack 4
    "style-loader": "^2.0.0",
    "css-loader": "^5.2.7",
    "sass-loader": "10.1.1"

Also, removing @storybook/preset-creat-react-app in .storybook/main.js is also required according to this issue.

Reference

storybookjs/presets#195 https://newbedev.com/syntax-error-sasserror-expected-code-example