在vue-cli初始化的項目中使用less

如今前端的vue框架愈來愈火，vue-cli做爲vue項目的腳手架工具，是咱們在開發中最最常用的。爲了在vue項目中更好的管理咱們的css文件，咱們一般會引入less或者sass來幫助咱們管理咱們的css代碼。那麼，本文旨在記錄如何在vue-cli初始化的項目中使用less來幫助咱們更好的管理css代碼。

首先，安裝less，推薦使用淘寶鏡像安裝：

cnpm install less less-loader --save複製代碼

而後，修改配置文件：打開build文件夾-->找到webpack.base.conf.js，輸入配置代碼：

module.exports = {
    ……
    module: {        
        rules: [
            ……
           //在rules數組的最後位置插入一項配置代碼
           {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }        
        ]}複製代碼

最後在你的style標籤中添加lang="less",scoped表示私有做用域

<style scoped lang="less">
    /*
     * 這裏面你就能夠愉快地書寫less代碼了
     */
</style>複製代碼