webpack PostCSS cssnext

webpack   PostCSS   cssnext
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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

app.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/

相關文章

前端開發 最新文章