本文將簡單介紹在vue2.x的環(huán)境下引入并使用less的流程
1践惑、安裝less
在項目的根目錄下打開命令行工具腹泌，執(zhí)行命令：
npm install less less-loader --save-dev
安裝完成后打開 build目錄，修改 webpack.base.conf.js 中的相關配置：
在 module.exports 中找到 module 中的 rules 數(shù)組
添加如下代碼：
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運行項目時出現(xiàn)報錯：
TypeError: loaderContext.getResolve is not a function
這很有可能是less-loader版本過高導致的，解決方法如下：
卸載現(xiàn)有l(wèi)ess-loader
npm uninstall less-loader
重新安裝低版本的less-loader
npm install less-loader@4.1.0 --save
