vue-cli 構建的專案中如何使用 Less
阿新 • • 發佈:2019-01-02
vue-cli 構建的專案預設是不支援 less 的,需要自己新增。
首選,安裝 less 和 less-loader ,在專案目錄下執行如下命令
npm install less less-loader --save-dev
當然,比起 npm,我個人更喜歡用 yarn
yarn add less less-loader --dev
安裝成功後,開啟 build/webpack.base.conf.js
,在 module.exports =
的物件的 module.rules 後面新增一段:
module.exports = {
// 此處省略無數行,已有的的其他的內容
module : {
rules: [
// 此處省略無數行,已有的的其他的規則
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
}
最後,在程式碼中的 style 標籤中 加上 lang="less"
屬性即可~
<style scoped lang="less"></style>