vuejs如何使用less

方法：1.安裝less依賴；2、修改「webpack.config.js」文件，設定loader載入依賴，讓其支援less；3、在需要的頁面中加入「」語句即可。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vuejs設定使用less

#第一步：安裝less依賴，

npm install less less-loader --save

第二步：

修改webpack.config.js文件，配置loader加載依賴，讓其支援外部的less,在原來的程式碼上添加

{

  test: /\.less$/,

  loader: "style-loader!css-loader!less-loader",

},

現在基本上已經安裝完成了

第三步：使用less

在使用的時候在style標籤裡加上lang=」less」裡面就可以寫less的程式碼了

style標籤裡加上scoped 為只在此作用域有效

<style lang="less" scoped></style>

或者@import './index.less'; //引入全局less文件

相關推薦：《vue.js教程》

以上是vuejs如何使用less的詳細內容。更多資訊請關注PHP中文網其他相關文章！