创建React项目
2020-09-25 本文已影响0人
Joemoninni
在create-react-app中使用 antd + scss, 基本配置
参考https://blog.csdn.net/rainbow_677294/article/details/82787770
-
安装脚手架
npm install -g create-react-app
-
通过脚手架搭建项目
create-react-app 项目名称
-
暴露配置
npm run eject // 此时项目根目录会生成一个config文件夹, 里面包含webpack的配置, 可自行修改
-
下载
sass-loader or sass
npm install sass-loader node-sass --save-dev
-
修改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
-
在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'