Nuxt.js使用Less

Nuxt.js 是一个基于 Vue.js 的应用框架，用于构建 SSR（Server Side Render）应用程序。它提供了许多方便的工具和功能，帮助我们更快地构建高质量的 Web 应用程序。其中之一是内置对 CSS 预处理器的支持，包括 Less。

安装Less

要在 Nuxt.js 中使用 Less，首先需要安装它。我们可以使用 npm 或 yarn 安装：

npm install less less-loader --save-dev

或者

yarn add less less-loader --dev

这将在您的项目中安装 Less 和 Less loader。

配置Less

一旦安装了 Less，接下来就需要将它添加到 Nuxt.js 中。您可以通过在 nuxt.config.js 文件中的 build 属性中添加 styleResources 属性来实现这一点。此属性使我们可以传递全局样式资源的数组，它们将在所有组件中自动呈现。

build: {
  styleResources: {
    less: '~/assets/less/*.less',
  },
}

在上面的代码中，我们告诉 Nuxt.js 寻找 ~/assets/less/*.less 路径下的所有 Less 文件，将其传递给全局，以便所有组件都可以使用它们。

创建样式文件

现在，我们已经安装了 Less，配置了 Nuxt.js，接下来，我们需要创建样式文件。

在 ~/assets/less 目录下，我们可以创建一个名为 common.less 的文件，用于存放所有通用的 Less 样式，例如全局变量、MIXIN、函数等。

例如，我们可以定义一个 variables.less 文件定义颜色和字体大小：

// ~/assets/less/variables.less
@primary-color: #1890ff;
@secondary-color: #fadb14;

@font-size-small: 12px;
@font-size-medium: 14px;
@font-size-large: 16px;

同时，我们还可以创建一个 mixin.less 文件来定义重复使用的样式代码：

// ~/assets/less/mixin.less
.text-center {
  text-align: center;
}

.clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

在Vue组件中使用Less样式

一旦有了全局样式资源数组和 Less 文件，我们就可以准备在 Vue 组件中使用 Less 样式了。我们只需要将它们导入到 Vue 组件中即可：

<template>
  <div>
    <h1 class="text-center">{{ title }}</h1>
    <p :style="`font-size: ${smallText}`">This is some small text.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, Nuxt.js!',
      smallText: '12px',
    };
  },
};
</script>

<style lang="less" scoped>
@import './assets/less/common.less';

h1 {
  color: @primary-color;
}

p {
  color: @secondary-color;
  font-size: @font-size-medium;
}
</style>

在上面的代码中，我们使用 scoped 属性创建了一个范围化的 Less 样式，它仅应用于当前 Vue 组件，不会影响整个应用程序。同时，我们还导入了 common.less 文件，以便在模板中使用变量和 MIXIN。

结论

在 Nuxt.js 中使用 Less 就像使用任何其他预处理器一样，并且它具有许多方便的工具和功能，可以大大提高我们构建 Web 应用程序的速度和质量。在本文中，我们介绍了如何安装 Less，配置 Nuxt.js，创建样式文件和在 Vue 组件中使用 Less 样式。现在，您可以开始构建漂亮而高效的网站啦。