postcss webpack 1 配置

[liche501]

Environment(required) | 环境（必填）

• antd-mobile version（antd-mobile版本）:1.0.5
• Browser (or mark react-native) and its version（浏览器或react-native版本）:chrome
• Operating environment (e.g. OS name) and its version（操作系统版本或设备型号）:mac 10.12.3

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

1.在index.html head中添加了以下代码：

  <script>
    !function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
    flex(100, 1);
  </script>

2.在webpack中添加了postcss-pxtorem（我的是create-react-app 创建的）

'use strict';

var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
var getClientEnvironment = require('./env');
var paths = require('./paths');
var pxtorem = require('postcss-pxtorem');


const svgDirs = [
 require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
 // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 2. 自己私人的 svg 存放目录
];
var publicPath = '/';
var publicUrl = '';
var env = getClientEnvironment(publicUrl);

module.exports = {

 devtool: 'cheap-module-source-map',

 entry: [
   require.resolve('react-dev-utils/webpackHotDevClient'),
   require.resolve('./polyfills'),
   paths.appIndexJs
 ],
 output: {
   path: paths.appBuild,
   pathinfo: true,
   filename: 'static/js/bundle.js',
   publicPath: publicPath
 },
 resolve: {
   fallback: paths.nodePaths,
   extensions: ['', '.web.js', '.js', '.json'],
   alias: {
     'react-native': 'react-native-web'
   }
 },

 module: {

   preLoaders: [
     // {
     //   test: /\.(js|jsx)$/,
     //   loader: 'eslint',
     //   include: paths.appSrc,
     // }
   ],
   loaders: [
     {
       exclude: [
         /\.html$/,
         /\.(js|jsx)(\?.*)?$/,
         /\.css$/,
         /\.json$/,
         /\.svg$/
       ],
       loader: 'url',
       query: {
         limit: 10000,
         name: 'static/media/[name].[hash:8].[ext]'
       }
     },
     // Process JS with Babel.
     {
       test: /\.(js|jsx)$/,
       include: paths.appSrc,
       loader: 'babel',
       query: {
         "plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]],
         cacheDirectory: true
       }
     },
     {
       test: /\.css$/,
       loader: 'style!css?importLoaders=1!postcss',
       postcss: [
           pxtorem({
             rootValue: 100,
             propWhiteList: [],
           })
         ]
     },
     {
       test: /\.json$/,
       loader: 'json'
     },
     {
       test: /\.(svg)$/i,
       loader: 'svg-sprite',
       include: svgDirs,  // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
     },
   ]
 },

 // We use PostCSS for autoprefixing only.
 postcss: function () {
   return [
     autoprefixer({
       browsers: [
         '>1%',
         'last 4 versions',
         'Firefox ESR',
         'not ie < 9', // React doesn't support IE8 anyway
       ]
     }),
   ];
 },
 plugins: [
   new InterpolateHtmlPlugin(env.raw),
   new HtmlWebpackPlugin({
     inject: true,
     template: paths.appHtml,
   }),
   new webpack.DefinePlugin(env.stringified),
   new webpack.HotModuleReplacementPlugin(),
   new CaseSensitivePathsPlugin(),
   new WatchMissingNodeModulesPlugin(paths.appNodeModules)
 ],
 node: {
   fs: 'empty',
   net: 'empty',
   tls: 'empty'
 }
};

What do you expected?（预期的正常效果）

自动适配屏幕

What happen?（发生了何种非正常现象）

iphone6下的和iphone6p下差别较大（iphone6p下 缩小过度）

（怕图片出不来，贴了个地址）
http://wxshop-auto.oss-cn-shanghai.aliyuncs.com/img/iphone-img.png

Re-producible online demo (可复现的在线demo)

下面的链接可在手机中演示，
http://mobilepos-staging.p2shop.cn/#/login?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJwYW5ncGFuZ2phbiIsImIiOiJNSVVTT0wsQ2FsdmluIEtsZWluLFRlZCBCYWtlcixMaWxseSBQdWxpdHplciIsImV4cCI6MTQ5MTgwNDE0NiwiaXNzIjoiYWNjb3VudCIsIm5iZiI6MTQ5MTU0NDk0NiwiciI6IlNhbGVzbWFuLE1hbmFnZXIiLCJzaWQiOiIyMDAwMDAxIiwidGlkIjoiMTAiLCJ1Ijoic2FsZXN3b21hbiIsInVpZCI6IjEwMDAwMDEifQ.3-wdXX_MU0hMM74X-vWtoR41vy8KyizI_eJZRrDEu6U

[paranoidjk]

看了下你的页面样式还是 px，并不是 rem，check下 px2rem 有没有生效

[liche501]

@paranoidjk
这段代码没起效果么？
我这的loader里只有css，是不是得把sass,less的loader加进来？

test: /\.css$/,
        loader: 'style!css?importLoaders=1!postcss',
        postcss: [
            pxtorem({
              rootValue: 100,
              propWhiteList: [],
            })
          ]

[paranoidjk]

这里应该会加载 antd-mobile 的 css。

         "plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]],

check 下你 postcss-pxtorem 的版本，最新版本的配置方法不同。

[warmhug]

关联 #1016 (comment) #683 (comment)

[liche501]

@warmhug 抱歉，您给我的我看过了，可还是不太明白。
我现在需要自己加判断，还是check postcss-pxtorem是否好用？

[liche501]

@paranoidjk @warmhug
https://github.com/minooo/React-Study/blob/master/step-03/webpack-dev-config.js#L115
非常感谢，在这找到了～

[paranoidjk]

配置方法问题先查官方文档
https://github.com/ant-design/ant-design-mobile/wiki/HD

https://github.com/postcss/postcss-loader#webpack-1-1

[deicao]

您好，我现在使用create-react-app创建一个demo，使用react-app-rewired插件（提供的config-overrides.js文件）扩展react脚手架内置webpack配置，

`const {
injectCssPlugin,
injectBabelPlugin,
getLoader
} = require('react-app-rewired');

const pxtorem = require('postcss-pxtorem');

const fileLoaderMatcher = function(rule) {
return rule.loader && rule.loader.indexOf(file-loader) != -1;
}

module.exports = function override(config, env) {
// babel-plugin-import
config = injectBabelPlugin(['import', {
libraryName: 'antd-mobile',
//style: 'css',
style: true, // use less for customized theme
}], config);

// customize theme
config.module.rules[1].oneOf.unshift({
test: /.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'), {
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'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
})
],
},
}, {
loader: require.resolve('less-loader'),
options: {
// theme vars, also can use theme.js instead of this.
modifyVars: {
"@hd": "2px",
"@brand-primary": "#1DA57A"
},
},
},
]
});

// css-modules
config.module.rules[1].oneOf.unshift({
test: /.css$/,
exclude: /node_modules|antd-mobile.css/,
use: [
require.resolve('style-loader'), {
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]___[hash:base64:5]'
},
}, {
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'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
pxtorem({
rootValue: 100,
propWhiteList: [],
})
],
},
},
]
});

// file-loader exclude
let l = getLoader(config.module.rules, fileLoaderMatcher);
l.exclude.push(/.less$/);

return config;
};`
字体加粗部分是高清方案配置，现在是配置无法生效，求解