react 移动端项目配置 postcss-pxtorem

2019-06-15 19:13:19 浏览数 (1)

前提
代码语言:javascript复制
*create-react-app 创建的项目
通过 eject 命令暴露出react 全部配置 

安装配置

postcss-pxtorem

代码语言:javascript复制
npm i postcss-pxtorem -D

添加rem转换插件

代码语言:javascript复制
webpack.config.js 
//104行
require('postcss-pxtorem')({
	rootValue : 100,
	selectorBlackList  : [], //过滤
	propList   : ['*'],
})
排错

使用less css文件为什么rem转换没有生效,

代码语言:javascript复制
 create-react-app 的postcss配置都在getStyleLoaders函数中
 在104行添加的转换工具插件没有错
 检查427行以下发现
 //less less-loader
 如图1 
 create-react-app 默认scss css自行配置less 要应用getStyleLoaders, rem转换工具就生效了
 效果 如图2
图 1

图 2
前提
代码语言:javascript复制
*create-react-app 创建的项目
通过 eject 命令暴露出react 全部配置 

安装配置

postcss-pxtorem

代码语言:javascript复制
npm i postcss-pxtorem -D

添加rem转换插件

代码语言:javascript复制
webpack.config.js 
//104行
require('postcss-pxtorem')({
	rootValue : 100,
	selectorBlackList  : [], //过滤
	propList   : ['*'],
})
排错

使用less css文件为什么rem转换没有生效,

代码语言:javascript复制
 create-react-app 的postcss配置都在getStyleLoaders函数中
 在104行添加的转换工具插件没有错
 检查427行以下发现
 //less less-loader
 如图1 
 create-react-app 默认scss css自行配置less 要应用getStyleLoaders, rem转换工具就生效了
 效果 如图2
图 1
图 2

0 人点赞