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')],
    },
  },
};