vue工程中postcss的基本使用

首先我们要知道：

在Vue.js项目中，@vue/cli-service已经将postcss-loader包含在内；所以我们在使用postcss中的插件的时候，我们只需要直接安装对应的插件即可

在这边我们以postcss中的插件autoprefixer和pxtorem为例：

注意：autoprefixer是vue/cli预先内置的，我们不需要安装；查看的方式如下：

npm list autoprefixer

结果： 

下面以postcss-pxtorem为例（postcss-px-to-viewport做法和这个一样）： 

1. 首先我们要在vue项目的根路径下打开终端：

   npm install postcss-pxtorem --save-dev

    

2. 然后在vue.config.js中配置css选项：

   //vue.config.js
   const { defineConfig } = require("@vue/cli-service");
   module.exports = defineConfig({
     transpileDependencies: true,
     outputDir: "dist",
     // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
     assetsDir: "static",
     publicPath: "/", //这是基础路径，一般放置在根路径下的话，只需要一个"/"；但是如果放置在子路径下的话，那么需要加上"/子路径的名称/"
     devServer: {
       //proxy: 
     },
     css: {
       loaderOptions: {
         postcss: {
           postcssOptions: {
             plugins: [
               // require("autoprefixer"),
               require("postcss-preset-env")({
                 stage: 3,
                 browsers: ["last 2 versions", "> 1%"],//将市场份额大于1%的浏览器，并且他的前两个版本
               }),
               require("postcss-pxtorem")({//将市场份额大于1%的浏览器，并且他的前两个版本
                 rootValue: 20,//这是设置根字体的大小
                 // propList: ["margin"],这个表示所有的单位都会转化成rem，除了font-size
               }),
               //postcss-px-to-viewport是将其他单位转化成vw的
               require("postcss-px-to-viewport")({
                 viewportWidth: 750, // 设计稿宽度
                 unitPrecision: 3, // 转换精度
                 propList: ["*", "!font-size"], // 需要转换的属性
                 viewportUnit: "vw", // 转换成vw单位
                 selectorBlackList: [], // 不转换的选择器
                 minPixelValue: 1, // 小于等于1px的值不转换
               }),
             ],
           },
         },
       },
     },
   });
   
   

3. 在根路径下新建配置文件postcss.config.js文件：注意：这个文件可以不写（前提是vue.config.js中的配置是按照上面方式进行css的配置）

   // postcss.config.js
   
   module.exports = {
     plugins: [
       // require("autoprefixer"), //这个我还没有找出来为啥直接写autoprefixer不行；但是下面的可以
       require("postcss-preset-env")({
         stage: 3,
         browsers: ["last 2 versions", "> 1%"], //将市场份额大于1%的浏览器，并且他的前两个版本
       }),
       require("postcss-pxtorem")  ,//默认是16px = 1rem
       require("postcss-pxtorem")({
         rootValue: 16,//这是设置根字体的大小
         // propList: ["*",'!font-size'],这个表示所有的单位都会转化成rem，除了font-size
       }),
     ],
   };

 

 4.启动命令：npm run serve；打开浏览器检查元素，就可以看见效果

最后：写的比较匆忙，用来给自己做一个笔记，同时也想分享出来；如果有误导信息给各位造成困扰，请各位指正！