1、创建create-react-app
这里我使用的是官方提供的脚手架工具并且采用了react-scripts-ts适配器
[react-scripts-ts]是一系列适配器，它利用标准的create-react-app工程管道并把TypeScript混入进来。
如果你不习惯使用Typescript可以在创建命令行当中去掉 --scripts-version=react-scripts-ts
create-react-app my-app --scripts-version=react-scripts-ts
初始路径如下
my-app/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
│ └─ ...
├─ package.json
├─ tsconfig.json
└─ tslint.json
导出Webpack配置文件(这里运行后是不可逆的，会造成项目目录和package.json的污染，但目前没有更优的解决办法)
yarn eject
2、配置Webpack
配置之前先下载依赖
yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano node-sass sass-loader typings-for-css-modules-loader
打开config/webpack.config.dev.js和webpack.config.prod.js 将刚刚下载好的依赖引用到我们的项目当中，两个文件配置相同
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const cssnano = require('cssnano');
在module中添加sass vw css-modules相关配置
{
test: /\.scss$/,
use: [
{ loader: require.resolve('style-loader') },
{
loader: require.resolve('typings-for-css-modules-loader'), // 如果项目中不使用typescript这里可以直改成css-loader
options: {
modules: true, // 开启css-modules
namedExport: true,
camelCase: true,
minimize: true,
sass: true,
localIdentName: "[local]_[hash:base64:5]"
}
},
{
loader: require.resolve('postcss-loader'), // 配置vw适配
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
// 适配移动端
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 667, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: true // (Boolean) Allow px to be converted in media queries.
}),
postcssWriteSvg({
utf8: false
}),
postcssCssnext({
warnForDuplicates: false
}),
cssnano({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
// end
],
},
},
{ loader: require.resolve('sass-loader') },
],
},
配置完之后重启环境即可。
