PX to rem in CSS style

Vue3: Scaffold Configuration

80867351

Unlike the original VUE-CLI 2.x version, if the Vue project is initialized with the latest version of @vue/cli, the Webpack configuration file is not normally visible. In the original 2.x version, we can easily prepare px2rem related configurations in Utils.js.

1. Install the installation lib-flexible:

NPM i-s lib-flexible

NPM i-d postcss Postcss-loader Postcss-px2rem

2. Introduction of lib-flexible in Project portal file Main.js

Import ' Lib-flexible/flexible.js '

3. Add the index.html header of the project public directory to the meta code of the phone-side adapter

4. Create the configuration file Vue.config.js in the root directory and configure the following information

Vue.config.js

module.exports = {    css: {        loaderOptions: {            css: {                // options here will be passed to css-loader            },            postcss: {                // options here will be passed to postcss-loader                plugins: [require(‘postcss-px2rem‘)({                    remUnit: 75                })]            }        }    }}

Res:

Note:

1.remUnit here to be prepared according to the rules of lib-flexible, if your design manuscript is 750px, with 75 just right.

2. When you encounter a 1px border, it is usually easy to find the missing part of the page border, you can use the/no/syntax to block the property conversion, for example

border: 1px solid red; /*no*/

3. Because of the particularity of the font, we usually do not use REM units when compiling the Font-size property, which is how you can use:

font-size: 24px; /*px*/

Native configuration: 1. Install and install the CSS file packaging plugin

CNPM i-d Minicssextractplugin Css-loader

Install Lib-flexible:

CNPM i-s lib-flexible

Install Postcss and Postcss-loader and Postcss-px2rem:

CNPM i-d postcss Postcss-loader Postcss-px2rem

2. Introduction of lib-flexible in Project portal file Main.js

Main.js

Import ' Lib-flexible/flexible.js ';

3. Add the index.html header of the project public directory to the meta code of the phone-side adapter

4. Create the configuration file Vue.config.js in the root directory and configure the following information

Vue.config.js

Const PATH = require ("path"), const Htmlwebpackplugin = require ("Html-webpack-plugin"); Const Cleanwebpackplugin = Require ("Clean-webpack-plugin"); Const Vueloaderplugin = require (' Vue-loader/lib/plugin '); Const Minicssextractplugin = require (' Mini-css-extract-plugin '); const PX2REM = require (' postcss-px2rem '); function Resolve (dir) {return path.join (__dirname,dir)}module.exports= {mode: "Development", Entry: "./src/main.js", O utput:{path:path.resolve (__dirname, "./dist"), FileName: "Main.bundle.js"}, resolve: {Extensio NS: ['. js ', '. Vue ', '. json ', '. css '], alias: {' vue$ ': ' vue/dist/vue.esm.js ', ' @ ': Resolve (' src        '),}}, devserver:{contentbase: "./dist", port:9000, Open:true,}, plugins:[ New Vueloaderplugin (), new Htmlwebpackplugin ({Template: "./public/index.html", FileName: "       Index.html "}), New Cleanwebpackplugin (['./dist ']), New Minicssextractplugin ({filename: "color.css",//Chunkfilename: "[Id].css"})], module : {rules:[{test:/\.vue$/, Loader: ' Vue-loader '},//{test:/\.css$/,use:[' Style-loader ', ' CSS                    -loader ']}, {test:/\.css$/, exclude:/node_modules/, use:[ Minicssextractplugin.loader, ' Css-loader ', {load                                 ER: "Postcss-loader", options:{Plugins: () =>[             Px2rem ({remunit:75})}},]                }, {test:/\.js$/, exclude:/(node_modules|bower_components)/,                    use:[' Babel-loader '}, {test:/(PNG|GIF|JP (e) g) $/, use:[       {                 Loader: ' Url-loader ', options:{limit:8192 }                    }                ]            }        ]    }}

Res:

Resources:

Postcss-px2rem:https://www.npmjs.com/package/postcss-px2rem

mini-css-extract-plugin:https://webpack.js.org/plugins/mini-css-extract-plugin/#src/COMPONENTS/SIDEBAR/SIDEBAR.JSX

80771700

{    test: /\.css$/,    exclude: /node_modules/,    use: [            MiniCssExtractPlugin.loader,       "css-loader",    //   "postcss-loader"      {          loader:"postcss-loader",          options:{              plugins:()=>[               px2rem({remUnit: 75})            ]          }      },          ]},

PX to rem in CSS style