vue-cli構建專案使用 less
阿新 • • 發佈:2018-12-30
在vue-cli中構建的專案是可以使用less的,但是檢視package.json可以發現,並沒有less相關的外掛,所以我們需要自行安裝。
第一步:安裝
npm install less less-loader --save-dev
即通過npm安裝less和less-loader,並記錄到devDependencies中,因為這是我們在開發中使用的而非在生產中使用,所以就不將之記錄在 dependencies 中。
第二步:在配置檔案中配置
實際上如果我們通過vue-cli來構建專案,這一步是可以省略的。
在webpack.dev.conf.js中,我們可以看到下面的程式碼:
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
即webpack.dev.conf.js在合併了webpack.base.conf.js的基礎上又添加了dev環境下的module。
注意:在上面的程式碼中,我們還可以使用loaders來代替rules, 他們的含義是一樣的。
在build資料夾下有一個utils.js檔案,這個檔案提供了一些通用的方法,供webpack.dev.conf.js和webpack.prod.conf.js使用。 其中styleLoaders方法如下:
// Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) { var output = [] var loaders = exports.cssLoaders(options) for (var extension in loaders) { var loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output }
通過這個方法可以對大多數css預處理進行了配置,具體配置在cssLoaders方法中。
第三步:在單元件.vue中使用
如下所示:
<template> <div class="hello"> <h2>{{msg}}</h2> <h2>Essential Links</h2> <ul> <li>Core Docs</li> </ul> <h2>Ecosystem</h2> </div> </template> <script> export default { name: 'hello', data: function () { return { msg: "Welcome to your vue.js app" } } } </script> <style scoped lang="less"> .hello { color: red; font-size: 0.45rem; h2 { color: blue; } } </style>
需要注意一下幾點:
- 已經在webpack中配置了,所以這裡不需要引入任何less檔案。
- 在style中宣告lang="less"。 注意: scoped的作用僅僅是限定css的作用域,防止變數汙染。
- 這樣就可以根據less的語法使用了。
補充:通過下面的程式碼就不難理解問什麼scoped可以隔離作用域了。 即給不同元件的所有html新增一個屬性,然後在css中使用屬性選擇器來防止作用域的汙染,實在聰明!!!
把scoped去掉之後,我們就可以發現已經沒有額外的屬性了: