vue工程中postcss的基本使用

insist_life

已于 2023-06-24 20:35:13 修改

阅读量1.7k

点赞数 1

文章标签： vue.js postcss 前端

于 2023-06-24 20:23:58 首次发布

本文链接：https://blog.csdn.net/insist_life/article/details/131364683

版权

首先我们要知道：

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

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

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

npm list autoprefixer

结果：

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

首先我们要在vue项目的根路径下打开终端：
```
npm install postcss-pxtorem --save-dev
```

然后在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的值不转换
            }),
          ],
        },
      },
    },
  },
});

在根路径下新建配置文件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
    }),
  ],
};