初次使用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'
]
}
]
}
完结
