在vue項目中引入less

本文將簡單介紹在vue2.x的環境下引入並使用less的流程

1、安裝less

在項目的根目錄下打開命令行工具，執行命令：

npm install less less-loader --save-dev

安裝完成后打開 build目錄，修改 webpack.base.conf.js 中的相關配置：
在 module.exports 中找到 module 中的 rules 數組
添加如下代碼：

module.exports = {
  ...
  ...
  module: {
    rules: [
    {...},
    {...},
    {
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader'
    }
  ]
}

2、使用less

在.vue文件的 style 標簽中添加 lang="less"后，即可采用less的語法編寫CSS代碼
引入變量(varibles)和混合(mixins)的寫法如下：
在 src/assets/目錄下新建 styles 目錄，並在此目錄下編寫 varibles.less 和 mixins.less
編寫CSS代碼時通過 import 引入：

<style scoped lang="less">
@import '../assets/styles/varibles.less';
@import '../assets/styles/mixins.less';
/* 樣式代碼 */
</style>

3、問題解決

在初次安裝less后，在本地使用npm run dev運行項目時出現報錯：

TypeError: loaderContext.getResolve is not a function

這很有可能是less-loader版本過高導致的，解決方法如下：
卸載現有less-loader

npm uninstall less-loader

重新安裝低版本的less-loader

npm install less-loader@4.1.0 --save