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 < 11",
"last 2 versions",
"> 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;
}