Vue3:腳手架配置

https://blog.csdn.net/weixin_41424247/article/details/80867351

與原來的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue項目時，通?？床坏絯ebpack的配制文件。而在原來的2.x版本，我們可以在utils.js中輕松配制px2rem相關配置。

1. 安裝

安裝lib-flexible：

npm i -S lib-flexible

npm i -D postcss postcss-loader postcss-px2rem

2. 在項目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3.在項目public目錄的index.html頭部加入手機端適配的meta的代碼

4.在根目錄下創建配制文件vue.config.js，并配制如下信息

vue.config.js

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

res:

注:

1.remUnit在這里要根據lib-flexible的規則來配制，如果您的設計稿是750px的，用75就剛剛好。

2.當你遇到1px的邊框時，通常容易發現頁面缺失部分邊框，這時你可以使用/no/語法來屏蔽該屬性轉換，例如

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

3.由于字體的特殊性，我們在編譯font-size屬性時，通常不使用rem單位，這時候你可以這樣使用：

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

原生配置:

1. 安裝

安裝css文件打包插件

cnpm i -D MiniCssExtractPlugin css-loader

安裝lib-flexible：

cnpm i -S lib-flexible

安裝postcss和postcss-loader和postcss-px2rem：

cnpm i -D postcss postcss-loader postcss-px2rem

2. 在項目入口文件main.js中引入lib-flexible

main.js

import'lib-flexible/flexible.js';

3.在項目public目錄的index.html頭部加入手機端適配的meta的代碼

4. 在根目錄下創建配制文件vue.config.js，并配制如下信息

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",output:{path:path.resolve(__dirname,"./dist"),filename:"main.bundle.js"},resolve :{extensions: ['.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',{loader:"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:

參考資料:

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

https://blog.csdn.net/mx18519142864/article/details/80771700

{test: /\.css$/,exclude: /node_modules/,use: [MiniCssExtractPlugin.loader, "css-loader",// "postcss-loader"{loader:"postcss-loader",options:{plugins:()=>[ px2rem({remUnit: 75})]}},] },
更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的28. css样式中px转rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。