Vue 項目在 style 標簽內使用全局 less 變量

問題描述：

使用 Vue CLI 創建的項目，在 index.less 文件中定義了一個變量

並在 main.js 中引入

在組件中使用該變量的時候依然會報錯

 

 

解決方案：

使用 style-resources-loader 提前加載定義全局變量的 less 文件

首先安裝依賴包

npm install style-resources-loader vue-cli-plugin-style-resources-loader -D

然后在 vue.config.js 中添加以下配置：

// vue.config.js

const path = require('path'); module.exports = { // ...
 pluginOptions: { 'style-resources-loader': { preProcessor: 'less', // 引入需要全局加載的 less 文件
      patterns: [path.resolve(__dirname, './src/styles/var.less')], }, }, };