创建React项目

在create-react-app中使用 antd + scss， 基本配置

参考https://blog.csdn.net/rainbow_677294/article/details/82787770

1. 安装脚手架

   npm install -g create-react-app
   

2. 通过脚手架搭建项目

   create-react-app 项目名称
   

3. 暴露配置

   npm run eject // 此时项目根目录会生成一个config文件夹, 里面包含webpack的配置, 可自行修改
   

4. 下载sass-loader or sass

   npm install sass-loader node-sass --save-dev
   

5. 修改config目录下的webpack.config.js文件

    {
           // Options for PostCSS as we reference these options twice
           // Adds vendor prefixing based on your specified browser support in
           // package.json
           loader: require.resolve('postcss-loader'),
           options: {
             // Necessary for external CSS imports to work
             // https://github.com/facebook/create-react-app/issues/2677
             ident: 'postcss',
             plugins: () => [
               require('postcss-flexbugs-fixes'),
               require('postcss-preset-env')({
                 autoprefixer: {
                   flexbox: 'no-2009',
                 },
                 stage: 3,
               }),
               // Adds PostCSS Normalize as the reset css with default options,
               // so that it honors browserslist config in package.json
               // which in turn let's users customize the target behavior as per their needs.
               postcssNormalize(),
             ],
             sourceMap: isEnvProduction && shouldUseSourceMap,
           },
         },
             
             
         // 新增代码
         {
           loader: require.resolve('sass-loader')
         },
         // 新增 end
   

6. 在react中使用antd / antd-mobile

   // 1. 安装 antd
   npm install antd --save
   // 2. 安装 babel-plugin-import 插件
   npm install babel-plugin-import --save-dev
   // 3. 修改package.json
   "babel": {
       "presets": [
         "react-app"
       ],
        "plugins": [
         [
           "import",
           {
             "libraryName": "antd",
             "libraryDirectory": "es",
             "style": "css"
           }
         ]
       ]
   }
   
   // 注意： 配置完成后只需要直接导入antd组件，不需要引入样式，也可以直接在项目中使用scss了
   import { Button } from 'antd'