css兼容性處理 · 前端

下載css兼容處理必須的loader ``` npm i postcss-loader postcss-preset-env -D ``` webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 設置nodejs環境變量 // process.env.NODE_ENV = 'development'; module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', /* css兼容性處理：postcss --> postcss-loader postcss-preset-env 幫postcss找到package.json中browserslist里面的配置，通過配置加載指定的css兼容性樣式 "browserslist": { // 開發環境 --> 設置node環境變量：process.env.NODE_ENV = development "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], // 生產環境：默認是看生產環境 "production": [ ">0.2%", "not dead", "not op_mini all" ] } */ // 使用loader的默認配置 // 'postcss-loader', // 修改loader的配置 { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ // postcss的插件 require('postcss-preset-env')() ] } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin({ filename: 'css/built.css' }) ], mode: 'development' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html> ``` src/js/index.js ``` import '../css/a.css'; import '../css/b.css'; ``` src/css/a.css ``` #box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; } ``` src/css/b.css ``` #box2 { width: 200px; height: 200px; background-color: deeppink; } ``` 注意這里需要在package.json中添加 ``` "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }, ```