Vue 中使用 style-resources-loader 配置全局使用 less sass 变量

在 vue 项目开发中经常使用到 less sass 等公用样式变量，不过每次都需要使用 @import 引入后才能使用，所以这里介绍一个全局应用变量不再需要引入的配置方法。

@primary-color: #1989fa;
@text-color: #aabca8;

<style lang="less">
@import '/src/styles/index.less';

.custom_text {
  padding-bottom: 50px;
  color: @primary-color;
}
</style>

---

一、安装插件

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

如果项目使用 vue-cli 构建，那就可以直接使用：

vue add style-resources-loader

选择预处理器，本文使用 less

使用 vue-cli add 会自动添加 vue-cli-plugin-style-resources-loader 插件。

二、配置文件

安装插件完成后配置 vue.config.js 中的 pluginOptions，代码如下：

const path = require('path');

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

三、全局 style 使用

<style lang="less">
.custom_text {
  padding-bottom: 50px;
  color: @primary-color;
}
</style>

小结

如果使用的是其他预处理器，如 sass stylus 等，只需要安装对应 npm 包和 loader，然后在 vue.config.js 中配置对应 preProcessor 即可，其他配置一致。