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/