vue中使用less全局变量

# vue 中使用 less 全局变量

# vue-cli2 配置

安装 sass-resources-loader

yarn add sass-resources-loader -D

配置 build/utils.js，找到 exports.cssLoaders 函数

在//todo:此处添加方法处添加以下方法

function lessResourceLoader() {
  const loaders = [
    cssLoader,
    'less-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        resources:
          // 这里配置定义less变量的地址
          path.resolve(__dirname, '../src/styles/variables.less'),
        ]
      }
    }
  ];
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

更改 exports.cssLoaders 函数的 return 参数，将 less: generateLoaders('less')改为 less: lessResourceLoader('less')，如下：

# vue-cli3 配置

安装 style-resources-loader

vue add style-resources-loader

安装成功后，选择 less

会自动在 vue.config.js 文件中生成 pluginOptions

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: []
  }
}

1
2
3
4
5
6

添加 less 变量地址，如下：

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: [path.resolve(__dirname, 'src/styles/variables.less')]
  }
}

1
2
3
4
5
6

上次更新: 2024/01/18, 10:44:15

← vue性能路由懒加载→