//引入css文件
<style>
  @import '~css/fost-base.css';
</style>
使用~引入的時(shí)候 發(fā)現(xiàn)無法通過編譯
原因是postcss-import官方文檔中說明對模塊的導(dǎo)入不需要加波浪號(hào)（~）
解決方法：
注釋掉.postcssrc.js文件下的 "postcss-import": {}, 

.postcssrc.js配置文件：

module.exports = {
  "plugins": {
    "postcss-import": {},      //用于@import導(dǎo)入css文件
    "postcss-url": {},           //路徑引入css文件或node_modules文件
    "postcss-aspect-ratio-mini": {},   //用來處理元素容器寬高比
    "postcss-write-svg": { utf8: false },    //用來處理移動(dòng)端1px的解決方案。該插件主要使用的是border-image和background來做1px的相關(guān)處理。
    "postcss-cssnext": {},  //該插件可以讓我們使用CSS未來的特性，其會(huì)對這些特性做相關(guān)的兼容性處理。
    "postcss-px-to-viewport": {    //把px單位轉(zhuǎn)換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。
        viewportWidth: 750,    //視窗的寬度
        viewportHeight: 1334,   //視窗的高度
        unitPrecision: 3,    //將px轉(zhuǎn)化為視窗單位值的小數(shù)位數(shù)
        viewportUnit: 'vw',    //指定要轉(zhuǎn)換成的視窗單位值
        selectorBlackList: ['.ignore', '.hairlines'],    //指定不轉(zhuǎn)換視窗單位值得類，可以自定義，可以無限添加
        minPixelValue: 1,    //小于等于1px不轉(zhuǎn)換為視窗單位
        mediaQuery: false   //允許在媒體查詢中使用px
    },
    "postcss-viewport-units":{}, //給vw、vh、vmin和vmax做適配的操作,這是實(shí)現(xiàn)vw布局必不可少的一個(gè)插件
    "cssnano": {    //主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它。
        preset: "advanced",   //重復(fù)調(diào)用
        autoprefixer: false,    //cssnext和cssnano都具有autoprefixer,事實(shí)上只需要一個(gè)，所以把默認(rèn)的autoprefixer刪除掉，然后把cssnano中的autoprefixer設(shè)置為false。
        "postcss-zindex": false   //只要啟用了這個(gè)插件，z-index的值就會(huì)重置為1
    }
  }
}

參考鏈接

第二種解決方法：

module.exports = {
    "plugins": {
        "postcss-import": {
            resolve(id) {
                if (id.charAt(0) == '~') {
                    return id.substr(1)
                } else {
                    return id
                }
            }
        },
        "postcss-url": {},
        "autoprefixer": {}
    }
}