Vue手動整合less預編譯器

2022-02-24 14:28:09 字數 403 閱讀 9805

less是一門css預處理語言,簡單的說就是在css的基礎上提公升為可程式設計性的預編譯器

需要在專案中安裝 less ,less-loader 2個外掛程式,語法為:npm i -d less less-loader

然後在 webpack.conf.js 檔案中進行如下配置

//

webpack.config.js

module.exports =, , ]}]}

};

最後的最後,不要忘了 vue元件裡的style標籤加上lang="less" 屬性,type可選項,以防萬一還是加上把,指不定哪個階段就有可能用上

官方文件:

webpack裡的less-loader整合:

less 官方文件:

npm 概要文件:

less預編譯器易錯點

1.在less中只要設定了乙個樣式類,我們就可以把它稱之為乙個方法,其它地方需要用到這些樣式,直接 類名 呼叫即可 原理 把當前樣式類中的 原封不動的copy乙份過去 不加括號即是普通樣式類,也是封裝的乙個函式,編譯的時候,這個樣式類中的 依然跟著編譯 加括號僅僅是封裝的函式,編譯的時候是不編譯函式...

CSS預編譯器

sass 必須先安裝ruby,再安裝sassgem install sass less 先安裝npmnpm install g less less lessc styles.less lessc styles.less styles.css lessc clean css styles.less s...

stylus(css預編譯器)

推薦去張鑫旭大神這裡詳細了解 安裝npm install g stylus 自動編譯 stylus w demo.styl o dist demo.styl是styl檔案,dist是要生成樣式的目錄檔名,w 是自動監視檔案 o 是將編譯後的css檔案輸出到指定檔案中 壓縮stylus compres...