Vue2 项目重构为 nuxt.js 项目-使用 less 定义全局 css 变量

个人网站：https://aijianli.site/ 可以免费在线制作简历，提供PDF下载，方便快捷。

由于前期在做爱简历 前端架构时，使用了 less 定义了全局的主题 less 变量，方便在具体的组件中去使用而不需要每个组件单独写样式。在迁移到 nuxt.js 时也需要定义成全局变量。

一、在 nuxt 项目中使用全局的 less

1.1 安装 less 和 less-loader

此处需要注意，nuxt2 中使用的 less 和 less-loader 版本不能太高，高版本会直接报错。建议使用

• “less”: “^3.8.1”
• “less-loader”: “^4.1.0”

npm install less@3.8.1 less-loader@4.1.0 --sava-dev

1.2 使用 安装 @nuxtjs/style-resources 配置

同样，过高的版本会直接报错，建议安装

• “@nuxtjs/style-resources”: “^1.2.0”

在 assets/css 下定义 全局的 less 文件 common-style.less，定义了全局的主题色。

在 nuxt.config.js 中配置 modules 和 styleResources。完成以下配置之后，在common-style中定义的样式变量就可以在任何地方使用了

{
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    less: [
      './assets/css/common-style.less'
    ]
  }
}

1.3 变量定义和使用

在 assets/css 下定义 全局的 less 文件，定义了全局的主题色

@main-color: #278688;
@assist-color: #56b3c2;
@border: #d5d5d5;
@title-bg: #dedede;
@font: #333;

.common-drawer-header {
    padding: 15px;
    margin-bottom: 0;
    border-bottom: 1px solid @border;
    background-color: @main-color;
    color: #fff;
}

.common-dialog-header {
    padding: 15px;
    margin-bottom: 0;
    border-bottom: 1px solid @border;
    background-color: @main-color;
    color: #fff;

    .el-dialog__title {
        color: #fff;
    }
}
body {
    margin: 0;
}

在组件中直接使用