webpack + PostCSS + cssnext

1.安裝依賴包

npm install --dev 
webpack extract-text-webpack-plugin 
css-loader 
file-loader 
postcss 
postcss-loader 
postcss-cssnext 
postcss-import

2.Webpack配置

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
    entry: [
        path.join(__dirname,'../app.js')
    ],
    output : {
        path : path.join(__dirname,'/dist/'),
        filename : '[name]-[hash]-min.js',
        publicPath : '/',
        chunkFilename : '[name].[chunkhash:5].chunk.js'
    },
    plugins : [
        new ExtractTextPlugin({
            filename : '[name]-[hash].min.css',
            allChunks: true
        }),
         new webpack.LoaderOptionsPlugin({
            options: {
                context: __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 配置

module.exports = {
    plugins: [
        require('precss'),
        require('postcss-import')({

        }),
        require('postcss-cssnext')({
            browsers: ['last 2 versions', '> 5%'],
        }),
        require('postcss-assets')({
            basePath : './src',
            loadPaths: []
        }),
    ]
}

到這裏就能夠愉快的用cssnext 編寫css了

好比src/app.css

import styles from './app.css';

在app.css中能夠這樣import其它樣式文件

/* Shared */
@import "shared/colors.css";
@import "shared/typography.css";
/* Components */
@import "components/Article.css"

有了有了cssnext，咱們能夠寫這樣的東西:

/* shared/colors.css */
:root {
  --color-black: rgb(0,0,0);
  --color-blue: #32c7ff;
}

/* shared/typography.css */
:root {
  --font-text: "FF DIN", sans-serif;
  --font-weight: 300;
  --line-height: 1.5;
}

/* components/Article.css */
.article {
  font-size: 14px;
  & a {
    color: var(--color-blue);
  }
  & p {
    color: var(--color-black);
    font-family: var(--font-text);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
  }
  @media (width > 600px) {
    max-width: 30em;
  }
}

但願能夠幫到你們。http://cssnext.io/postcss/