28. css樣式中px轉rem

Vue3:腳手架配置

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

與原來的vue-cli 2.x版本不一樣的是：若是使用最新版本的@vue/cli初始化vue項目時，一般看不到webpack的配製文件。而在原來的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-loader
                plugins: [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})
            ]
          }
      },
      
    ]
},