首先我们要知道:
在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 }), ], };
4.启动命令:npm run serve;打开浏览器检查元素,就可以看见效果
最后:写的比较匆忙,用来给自己做一个笔记,同时也想分享出来;如果有误导信息给各位造成困扰,请各位指正!