#5 React webpack设置postcss

初次使用postcss,还不太熟练,配合css modules来给组件添加样式。

1.首先先安装相应的包：

npm install --save-dev postcss postcss-loader precss 
                       postcss-import postcss-scss autoprefixer

• postcss-loader: 加载器
• postcss-import： 可以使用 import someStyle from 'somewhere' 这种引入其他样式文件的语法, postcss-import
• postcss-scss: 注意这个插件不是编译scss扩展的文件，而是提供解析 mixins 及 variables 的能力，也可以说是提供sass中比较常见的2种功能的解析能力，需要配合下面的precss使用 postcss-scss解析器
• precss： 这个包提供各种类似sass的语法，比如变量，条件语句，循环，@define-extends等功能 precss github
• autoprefixer: 这个自动添加vendor前缀，十分强大，来源于caniuse

2.webpack基本配置

当然解析css文件还需要其他的一些加载器：

npm install --save-dev style-loader css-loader

这里就不详细介绍这些了。

webpack.config.js:

var AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 35',
  'Firefox >= 31',
  'Explorer >= 9',
  'iOS >= 7',
  'Opera >= 12',
  'Safari >= 7.1',
];
module.exports = {
  // ...
  module: {
    loaders: [
    {
      test: /\.s?css$/,
      loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]__[name]__[local]___[hash:base64:5]',
        'postcss-loader?parser=post-scss'
      ]
    }
    ]
  },
  // ...
  },
  // 调用postcss中各种插件
  postcss: function plugins(bundler) {
    return [
      require('postcss-import')({ addDependencyTo: bundler }),
      require('postcss-precss')(),
      require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS })
    ]
  }

完整的webpack.config.js文件（当然这只是用于开发阶段的配置）：

var webpack = require('webpack');
var path = require('path');
var AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 35',
  'Firefox >= 31',
  'Explorer >= 9',
  'iOS >= 7',
  'Opera >= 12',
  'Safari >= 7.1',
];

module.exports = {
  devtool: '#inline-source-map',
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './src/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    moduleDirectories: ['node_modules', 'src'],
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.s?css$/,
        loaders: [
            'style-loader?sourceMap',
            'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
            'postcss-loader?parser=postcss-scss'
        ]
      },
      // {
      //   test: /\.jsx?$/,
      //   exclude: /node_modules/,
      //   loader: 'eslint-loader'
      // }
    ]
  },
  postcss: function plugins(bundler) {
    return [
      require('postcss-import')({ addDependencyTo: bundler }),
      require('precss')(),
      require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
    ];
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

另外附另一种使用sass-loader加载的方案部分配置：

module: {
  loaders: [
    // ...
    {
      test: /\.sass/,
      loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]__[name]__[local]___[hash:base64:5]',
        'resolve-url',
        'sass?sourceMap'
      ]
    }
  ]
}

完结

• postcss 教程 github