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

It also includes bootstrap as default styling framework.

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

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

Launches the test runner in the interactive watch mode.

Build the project into build folder.

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

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.

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 from .storybook/main.js is also required according to this issue.

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