打开配置项

由于 create-react-app 找不到配置项，需要输入一下命令，这个一个不可逆过程，一旦你执行了，就不能回到初始化

npm run eject

安装 scss

cnpm i sass-loader node-sass --save-dev

引入 scss 全局变量

• 打开 config/webpack.config.js
• 找到如下代码

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
}

• 修改成

{
  test: sassRegex,
  exclude: sassModuleRegex,
  // 看源码可以看出来 getStyleLoaders 返回的是一个数组，所以我们可以用 concat把他合并
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ).concat({
    // 这行的意思是引入加载器 sass-resources-loader
    loader: 'sass-resources-loader',
    options: {
      // 这里是需要引入全局的资源文件，它可以是一个字符串或者是一个数组， 通常用数组去代替。
      resources: ['xxx.scss']
    }
  }),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},

• 重新启动项目

安装使用mobx和mobx环境依赖

• 安装装饰器所需依赖

npm install --save-dev babel-plugin-transform-decorators-legacy

• 安装应用配置

npm install @babel/plugin-proposal-decorators

• 安装mobx和mobx-react

npm install mobx --save
npm install mobx-react

• 配置package.json

"babel": {
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ]
    ],
    "presets": [
        "react-app"
    ]
}