阅读 2139

vue中postcss怎么配置

主要是.postcssrc.js中的配置

在进入主题之前先记录下node中读取文件路径的问题,node.js中的文件路径主要是包括__dirname,__filename,process.cwd(),./,../等,前面三个是绝对路径,后面是相对路径,当然你可以用path.resolve('./')来转换相对绝对路径

我的文件夹配置如下,路径为E:\vue\vue-uk


现在分别在build/vue-loader.conf.js文件,和.postcssrc.js文件中打印这三个值:__dirname,__filename,process.cwd(),以下为打印结果

1.  build/vue-loader.conf.js


2.  .postcssrc.js


做个总结:

__dirname:获得当前执行文件所在目录的完整目录名

__filename:获得当前执行文件的带有完整绝对路径的文件名

process.cwd():获得当前执行node命令时候的文件夹目录名

ok,进入正题.postcssrc.js的配置问题,一般很多人都是直接在Github上面copy下来,也许不会保错,但是...

首先将大框架搭好

module.exports = {  
    "plugins": {    
        //各种插件  
    }
}

复制代码

现在以postcss-px2rem、autoprefixer为例子,当然要保证这两个插件已经安装好

npm install postcss-loader --save--dev
npm install postcss-px2rem --save--dev
npm install autoprefixer --save--dev
复制代码

postcss-px2rem是将css文件中的px转换成rem,autoprefixer是加上各种浏览器前缀

module.exports = {    
    "plugins": {        
        "postcss-px2rem": {     
              //UI图片的基准值 750px就是75,640px就是64,默认为75       
              remUnit: 75,        
              remPrecision: 6, //准换成rem后的小数点精确数位 默认为6      
              baseDpr: 2, //基准device pixel ratio值 默认为2      
              //当然npm上还有很多options 按需求配置      
        },         
        // to edit target browsers: use "browserslist" field in package.json   
       //一般package.json中会有browserslist的配置,这里直接写出来就好        
       "autoprefixer": {}    
    }

}

复制代码

当然postcss不止这些配置,到现在为止,postcss上已经有超过200个插件

其他常见的插件还有postcss-import,解析文件中@import的插件,postcss-url解析css中背景图url引用的插件,还有资源引用插件postcss-assets,使用postcss-assets中的resolve方法可以简便css中url的引用,width()、height()可以直接获取图片的宽高

"postcss-assets": {
    loadPaths: [path.resolve(__dirname,'src/assets/img')], //__dirname用法见前面
    relative: true    //开启相对路径模式
}

复制代码

现在配置后css中可以直接使用img中的图片

.func-normal{    
    background-image: resolve('head_bar@2x.jpg');
}

复制代码

而不需要写

background-image: resolve('../assets/img/head_bar@2x.jpg');
复制代码

也可以

.class{
    width: width('foobar.png'); /* 320px */  
    height: height('foobar.png'); /* 240px */
}
复制代码

详细的postcss-assets配置见www.npmjs.com/package/pos…

最后.postcssrc.js的配置大概是

const path = require('path');
module.exports = {
    "plugins": {
        "postcss-import": {},
         "postcss-url": {},
        "postcss-assets": {
            loadPaths: [path.resolve(__dirname,'src/assets/img')],
            relative:true
        },
        "postcss-px2rem": {
            remUnit: 75, 
        },
         "autoprefixer": {}
    }
}

复制代码

你还可以往里面加很多很多的postcss配置来完善css...