在基于 webpack 項(xiàng)目模板創(chuàng)建的項(xiàng)目(vue init webpack my-project
)中使用 sass。
在 webpack 中撬碟,所有的預(yù)處理器需要匹配對(duì)應(yīng)的 loader。vue-loader 允許你使用其它 webpack loader 處理 Vue 組件的某一部分。它會(huì)根據(jù) lang 屬性自動(dòng)推斷出要使用的 loader。
sass 相關(guān)依賴包安裝
相關(guān)依賴包安裝:
npm install sass-loader node-sass --save-dev
使用
sass 和 scss 語(yǔ)法不一樣的坷澡,可以參考此文檔。 下面列舉 scss 版本的含蓉,對(duì)應(yīng)的 sass 版本只需要將lang="scss"
改成lang="sass"
即可频敛。
頁(yè)面內(nèi)樣式:
<style lang="scss" scoped>
.sign {
height: 100%;
min-height: 750px;
text-align: center;
font-size: 14px;
background-color: #f1f1f1;
.tag {
display: inline-block;
height: 85%;
vertical-align: middle;
}
}
</style>
引入樣式文件:
<style lang="scss" >
@import './assets/css/base.scss';
.demo {
}
</style>
下面提供官方文檔供參考和深入的配置:
ps: 基于第二個(gè)文檔,我配置過(guò)sass-loader 警告
部分馅扣,總是報(bào)錯(cuò)斟赚。不配置這部分也能使用,后續(xù)解決了相關(guān)問(wèn)題差油,再更新此文拗军。