其實(shí)hotcss原作者在GitHub上的教程已經(jīng)很清楚了,但是鑒于很有很多小朋友還是看不明白紊扬,這里再補(bǔ)充一些
GitHub地址:https://github.com/imochen/hotcss
項(xiàng)目使用vue init webpack Pro_name構(gòu)建
安裝依賴包
scss使用
npm install node-sass style-loader sass-loader@7.3.1 -D
注意sass-loader 最新版本8.0.2會(huì)有問(wèn)題,所以這里用的是7.3.1版本
在build文件夾下面的webpack.base.conf.js文件里面添加規(guī)則
{
????test: /\.sass$/,
????loaders: ['style', 'css', 'scss']
}
放到module.rules里面即可
移動(dòng)端配合px2rem使用更佳
下載px2rem.js文件然后直接在main里面import引入
新建px2rem.scss文件兄墅,里面這些就夠了
@function?px2rem($px)?{
????@return?$px*320/$designWidth/20+rem;
}
$designWidth:?1080;?//?設(shè)計(jì)圖橫屏多少就是多少藻烤,這里按照1080來(lái)
寫(xiě)樣式的時(shí)候引入scss文件
使用:
<style?lang="scss"?scoped>
@import?"./../assets/px2rem.scss";
.phone?{
??font-size:?px2rem(40);
}
</style>
現(xiàn)在還有一個(gè)問(wèn)題是必須每個(gè)文件都要引入這個(gè)文件梗掰,暫時(shí)還沒(méi)有全局使用的方法灭翔,不知道有沒(méi)有大佬能指點(diǎn)一番