vue中postcss怎麼配置

qingtonghub發表於2018-11-21
VueCSS

主要是.postcssrc.js中的配置

在進入主題之前先記錄下node中讀取檔案路徑的問題，node.js中的檔案路徑主要是包括__dirname，__filename，process.cwd()，./，../等，前面三個是絕對路徑，後面是相對路徑，當然你可以用path.resolve('./')來轉換相對絕對路徑

我的資料夾配置如下，路徑為E:\vue\vue-uk

vue中postcss怎麼配置

現在分別在build/vue-loader.conf.js檔案，和.postcssrc.js檔案中列印這三個值：__dirname，__filename，process.cwd()，以下為列印結果

1.  build/vue-loader.conf.js

vue中postcss怎麼配置

2.  .postcssrc.js

vue中postcss怎麼配置

做個總結：

__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...


相關文章