webpack + PostCSS + cssnext

hqman 發(fā)布于2019-08-21 12:00 / 2771人閱讀

摘要：安裝依賴包配置配置到這里就可以愉快的用編寫了比如在中可以這樣其它樣式文件有了有了，我們可以寫這樣的東西希望可以幫到大家。

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/