preface

In the previous article, you completed the basic configuration of WebPack to compile ES6. This article shows you how to compile PostCSS using WebPack.

For an introduction to common PostCSS plug-ins and syntax, click here.

Release notes

The version of Webpack used for this article is: 4.30.0

Start the configuration

Component installation

Install the CSS Loader using the command line:

$ cnpm install --save-dev style-loader css-loader
Copy the code

Then install postCSS-loader:

$ cnpm install postcss-loader --save-dev
Copy the code

Install PostCSS’s most commonly used component precSS:

$ cnpm install precss --save-dev
Copy the code

Creating a CSS File

Create style.css under./ SRC/CSS:

webpack-es6
  |- /dist
    |- index.html
  |- /src
    |- index.js
    |- css
        |- style.css
Copy the code

Webpack configures CSS processing rules

Add CSS rules to webpack.config.js:

const path = require('path');
module.exports = {
    entry: './src/index.js'.output: {filename:'index.js'.path:path.resolve(__dirname,'dist')},// The following code is newly added
    module: {rules:[
            {
                test: /\.css$/.// Match all files ending in.css and process them through the following loader
                use:[
                    'style-loader'.'css-loader'.'postcss-loader']]}}// The above code is the newly added code
};
Copy the code

Configuration PostCSS

Create a new postcss.config.js file in the project directory and introduce the precSS plug-in we installed in the configuration file:

module.exports = {
    plugins: [require('precss')]}Copy the code

Configuration is complete

This completes the configuration of webPack PostCSS, where the file directory is as follows:

webpack-postcss
    |- node_modules
    |- /dist
        |- index.html
    |- /src
        |- css
            |- style.css
        |- index.js
    |- package.json
    |- package-lock.json
    |- postcss.config.js
    |- webpack.config.js
    
Copy the code

Add code

Next, let’s add code to test whether the configuration is successful.

Add code to file./dist/index.html:

<p><span>PostCSS</span>Compile successfully</p>
Copy the code

File./ SRC/CSS /style.css add code:

$color_index: 1; // PrecSS variable definition syntax
P{
    color: red;
    span{
        @if $color_index == 1{ // Precss judgment syntaxcolor: blue; } @else{
            color: green; }}}Copy the code

Add code to file./ SRC /index.js:

import './css/style.css'; // Import CSS into the webpack entry js file
Copy the code

compiler

Run the command line

$ npm run build
Copy the code

Open index. HTML. If the color of PostCSS on the page is blue, PostCSS compilation is complete. The page effect is as follows:

conclusion

  • PostCSSSupport for future nesting rules and loop statementscssSyntax, can also beAdding a Browser prefixThese tedious work to the process, so that our minds are focused on the code logic, will make the process of development easier;
  • To learn about PostCSS plugins and syntax, click here.
  • The process of webpack configuring PostCSS is not complicated, and a simple configuration can use moreCSSGrammar, why not? The next stepUse Webpack to manage resource files such as images.

Refer to the link

Webpack Chinese website: www.webpackjs.com/

More articles

  • Check out other articles of netease Creative Department: github.com/f2e-netease…
  • Check out more of my articles: github.com/ningbonb/bl…