create-react-app环境搭建-白红宇

这是我在学习react过程中所遇到的问题以及解决办法

create-react-app创建项目: create-app-react projectName

暴露出配置文件：npm run eject

项目中使用less:


        yarn add less less-loader    
        将test: /\.css$/ 改成test: /\.(css|less)$/    
        +{    +   loader: require.resolve('less-loader')    +}复制代码

项目中使用antd按需引入


        yarn add antd    
        yarn add babel-plugin-import --save-dev    方法一: 
        "babel": {        "presets": [            "react-app"        ],        +"plugins": [        +    [        +        "import",        +        {        +            "libraryName": "antd",        +            "style": "css"        +        }        +    ]        +]    }        方法二:     npm run eject    
        在 test: /\.(js|mjs|jsx|ts|tsx)$/ 中的plugins中增加    ["import", {
   "libraryName": "antd","style": true }]    同时在上面配置less的地方加上下面这一句代码    {       loader: require.resolve('less-loader'),    +  options: { javascriptEnabled: true }    }        
    复制代码

项目中使用css module以及与antd的冲突解决


        {         test: /\.(css|less)$/,        +exclude: /node_modules/, // 排除node_modules目录         use: getStyleLoaders({        +    modules: true, // 新增对css modules的支持        +    localIdentName: '[name]__[local]__[hash:base64:5]',            importLoaders: 1,            sourceMap: isEnvProduction && shouldUseSourceMap,        })    },    
        {         test: /\.(css|less)$/,        +exclude: /src/, // 添加排除src         use: getStyleLoaders({        —    // modules: true, // 新增对css modules的支持        —    // localIdentName: '[name]__[local]__[hash:base64:5]',            importLoaders: 1,            sourceMap: isEnvProduction && shouldUseSourceMap,        })    },    
    复制代码