search
HomeWeb Front-endCSS TutorialLet's talk about how webpack4 handles css

Foreword: Webpack processing CSS is a very basic topic. It's just that in webpack4, when using autoprefixer to solve CSS browser compatibility, there will be a pitfall that is different from before. So I will write about this knowledge in detail.

1. Required dependencies

  • style-loader: Inject css files into the style tag of the html page. Reference: https://www.webpackjs.com/loa...
  • css-loader: parses css files imported into js. Reference: https://www.webpackjs.com/loa...
  • less-loader: parses css preprocessing language. If you use other preprocessing languages, you must use the corresponding loader. Reference: https://www.html.cn/doc/webpa...
  • postcss-loader: Post-process the css we have written in the project:

    • Parse CSS into an Abstract Syntax Tree (AST) structure that JavaScript can operate,
    • Call the plug-in to process the AST and get the result.
  • autoprefixer: A plug-in for postcss-loader that prefixes css to adapt to different browsers.

Note: The function of postcss-loader is just like the post-production of film and television. It combines all the original files, then uses plug-ins to add special effects, and finally outputs the finished product. The autoprefixer plug-in performs post-processing on the AST parsed by postcss-loader.

2. Install dependencies

npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer

3. Create less test file style.less

#world{
  display: flex;
}

4. Import style.less

import './style.less';
in the main file index.js

Five, webpack configuration file webpack.config.js

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                'style-loader',
                {loader: 'css-loader', options: { importLoaders: 1 } },
                'less-loader',
                'postcss-loader'
            ]
        },
    ]
}

css-loader’s importLoaders: 1, is a very important setting. This will cause all parsed css to be injected into only one style tag. Without this configuration, a new style tag will be created when each new css file is injected. Some browsers have a limit on the number of style tags.

Sixth, create the postcss configuration file postcss.config.js, and introduce the autoprefixer plug-in

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

Seventh, add the browser list browserslist in package.json. This is the pitfall mentioned in the preface. Without it, autoprefixer will not work

{
 "scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server  --mode development"
 },
 "browserslist": [
  "defaults",
  "not ie  1%",
  "iOS 7",
  "last 3 iOS versions"
 ]
}

Eight, run the command

npm run build

Nine, the css parsing is successful, the effect is as follows:

#world {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Recommended learning: "css video tutorial"

The above is the detailed content of Let's talk about how webpack4 handles css. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
Show Search Button when Search Field is Non-EmptyShow Search Button when Search Field is Non-EmptyApr 15, 2025 am 10:00 AM

I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input () when that placeholder is present.

The Trick to Animating the Dot on the Letter 'i'The Trick to Animating the Dot on the Letter 'i'Apr 15, 2025 am 09:55 AM

Here’s the trick: by combining the Turkish letter "ı" and the period "." we can create something that looks like the letter "i," but is made from two separate

Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window APIWeekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window APIApr 15, 2025 am 09:53 AM

In this week's roundup: "Add to home screen" has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how

Making a Chart? Try Using Mobx State Tree to Power the DataMaking a Chart? Try Using Mobx State Tree to Power the DataApr 15, 2025 am 09:49 AM

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and

Blocking Third-Party Hands from the Cookie JarBlocking Third-Party Hands from the Cookie JarApr 15, 2025 am 09:48 AM

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com,

Ten-Ton WidgetsTen-Ton WidgetsApr 15, 2025 am 09:43 AM

At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example

Recipes for Performance Testing Single Page Applications in WebPageTestRecipes for Performance Testing Single Page Applications in WebPageTestApr 15, 2025 am 09:42 AM

WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at

Stop Animations During Window ResizingStop Animations During Window ResizingApr 15, 2025 am 09:40 AM

Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools