1.安装依赖包npminstall--devwebpackextract-text-webpack-plugincss-loaderfile-loaderpostcsspostcss-loaderpostcss-cssnextpostcss-import2.Webpack配置constpath=require('path')constwebpack=require('webpack')constHtmlWebpackPlugin=require('html-webpack-plugin')constExtractTextPlugin=require('extract-text-webpack-plugin')module.exports={entry:[path.join(__dirname,'../app.js')],输出:{路径:path.join(__dirname,'/dist/'),文件名:'[name]-[hash]-min.js',publicPath:'/',chunkFilename:'[name].[chunkhash:5].chunk.js'},plugins:[newExtractTextPlugin({filename:'[name]-[hash].min.css',allChunks:true}),newwebpack.LoaderOptionsPlugin({选项:{上下文:__dirname,postcss:[require('autoprefixer'),require('precss'),require('postcss-assets')]}})],module:{loaders:[{test:/\.jsx?$/,exclude:/node_modules/,loader:'babel-loader',query:{"plugins":["transform-decorators-legacy"],"presets":["es2015","stage-0","react"]}},{test:/\.json?$/,loader:'json'},{test:/\.css$/,loader:ExtractTextPlugin.extract({fallback:'style-loader',use:'css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss-loader'})},{test:/\.(png|svg|jpg|gif)$/,loader:'file-loader'}]}}3.postcss.config.js配置模块.exports={插件：[require('precss'),require('postcss-import')({}),require('postcss-cssnext')({浏览器:['last2versions','>5%'],}),require('postcss-assets')({basePath:'./src',loadPaths:[]}),]}这里可以愉快的用cssnext写css，比如src/app.cssimportstylesfrom'./app.CSS';在app.css中，你可以像这样导入其他样式文件/*Shared*/@import"shared/colors.css";@import"shared/typography.css";/*Components*/@import"components/Articlecss"使用cssnext，我们可以这样写：/*shared/colors.css*/:root{--color-black:rgb(0,0,0);--color-blue:#32c7ff;}/*shared/typography.css*/:root{--font-text:"FFDIN",sans-serif;--字体粗细：300；--line-height:1.5;}/*components/Article.css*/.article{font-size:14px;&a{颜色:var(--color-blue);}&p{颜色:var(--color-black);字体系列:var(--font-text);字体粗细：var(--字体粗细)；行高:var(--行高);}@media(width>600px){最大宽度：30em;}}希望能帮到大家。http://cssnext.io/postcss/
