react下stylus和postCss配置

一 安装相关插件

1. 进入项目根部

2. 执行如下命令进行插件安装

npm install -g stylus
npm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt postcss-write-svg postcss-preset-env postcss-viewport-units cssnano -S

postcss-aspect-ratio-mini 插件 用来自动设置长宽比缩放

postcss-px-to-viewport 插件用来自动将px转化为vw

postcss-write-svg 插件用来解决1px边框问题，原理是将1px border-img或者background-img编译成图片。

详情见这片文章

再聊移动端适配

一段时间的安装后，就进入webpack配置阶段了。

二 webpack相关配置

1. 释放 eject

新生成的react项目一开始是不存在config配置文件夹的

使用 npm run eject 命令进行释放

红色框内是webpack的配置文件

2. 进行webpack.config.js 大略说明

对webpack.config.js文件大致可以分为如下几个相对重要的部分

(1) loder和各模块配置引入部分

(2) 关于样式文件解析的loaders配置部分

（3） module 模块配置部分

3. stylus和postCss相关配置

（1）引入postCss相关模块

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport-opt');
const postcssWriteSvg = require('postcss-write-svg');
const postcssPresetEnv = require('postcss-preset-env');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');

将上述代码复制贴到webpack.config.js文件的头部如下红色方框内所示

（2）将postCss的loder配置到 样式文件解析的loaders配置部分

如下图红框所示

webpack的module下的rules属性值为一个对象数组，其下的每一个元素对象都可以指定对一种文件的编译处理方法。

每个元素对象的test属性通过正则表达式来匹配相应文件。

use属性下的loader用来表示使用哪种loader，来对这类文件进行处理。

loader属性如果为一个数组，则会按照从后到前的顺序，依次按照指定的loder对文件进行处理。

所以 getStyleLoaders（）函数的第二个参数用来指定css的预处理器，如果这个参数存在的话，会将这个预处理器loder放在最后，然后将这个数组返回。

这样就保证了webpack先将styl文件解析为css文件，然后再对css文件使用postCss进行处理。

正如上图绿框和蓝框所示。

当然各位关心的配置代码也有，在下方

 {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            postcssAspectRatioMini({}),
            postcssPxToViewport({
              viewportWidth: 750, // (Number) The width of the viewport.
              viewportHeight: 1334, // (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', '.antd'], // (Array) The selectors to ignore and leave as px.
              minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
              mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
              exclude: /(\/|\\)(node_modules)(\/|\\)/
            }),
            postcssWriteSvg({
              utf8: false
            }),
            postcssPresetEnv({}),
            postcssViewportUnits({}),
            cssnano({
              "cssnano-preset-advanced": {
                zindex: false,
                autoprefixer: false
              },
            }),
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      }

（3）在 module 模块配置部分 引入对styl文件的处理规则

如下图所示

使用 getStyleLoaders （）函数来引用相应的设置，如果使用sass，只要将第二个参数改为‘sass-loader’即可，哦对要先npm install 安装对应模块哦。

如此配置就完成了，喜大普奔~~~