如何在 Nuxt 中使用 SCSS 进行样式设置

前端开发 1年前 83

介绍

SASS 使大型项目的工作更有条理。它允许您使用变量、嵌套规则、mixin 和函数。Nuxt 中首选的样式方法是组件文件样式，将 SASS 集成到您的项目中可以使您的组件文件样式看起来更易于理解。

如何在 Nuxt 中导入 SASS

要在设置 Nuxt 应用程序后添加 SASS，我们将首先安装 SASS 和 sass-loader。让我们根据我们的包管理器运行这些命令中的任何一个。

$ yarn add sass sass-loader --dev
# or
$ npm install sass sass-loader --save-dev

组件文件样式

在我们的项目中安装 SASS 和 sass-loader 后，我们现在可以在组件文件中编写 SCSS。

让我们看一个例子：

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-decoration: none;
    outline: none;

    // variant
    &--primary {
        background-color: #0e34cd;
        color: #ffffff;
    }
}
</style>

在上面的示例中，我们只需要在样式标签上指定 lang=”scss”，我们现在可以在该组件中编写 scss。

全局文件导入和变量

要导入全局 SCSS 文件，例如变量和 mixins 文件，我们需要安装样式资源：

$ yarn add @nuxtjs/style-resources --dev
# or
$ npm install @nuxtjs/style-resources --save-dev

接下来，我们可以通过将刚刚安装的模块添加到 buildModules 来更新我们的 nuxt.config.js 文件。

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
  '@nuxtjs/style-resources',
],

接下来，让我们在 assets/style 文件夹中创建一个全局 variables.scss 文件。

在里面添加一个变量：

// assets/style/variables.scss

$primary: #010933;
$white: #fff;

接下来，我们需要在 nuxt.config 文件中导入这个文件：

 styleResources: {
    scss: [
      '~/assets/style/variables.scss',
    ],
  },

现在我们的 variables.scss 中的变量可以在我们所有的组件中使用。

接下来，让我们通过更新我们的按钮组件来测试它。

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-decoration: none;
    outline: none;

    // variant
    &--primary {
        background-color: $primary;
        color: $white;
    }
}
</style>

我们已将按钮变体颜色更新为全局 SCSS 变量（ $p r i m a r y 和$ white）。

混合

SASS 中的 Mixin 用于编写可以在代码的其他部分重用的样式。

让我们创建一个示例 mixin 以使项目居中。

// assets/style/mixins.scss

@mixin center-item {
  text-align: center;
  align-items: center;
  justify-content: center;
}

接下来，我们需要在 Nuxt 配置中导入我们的 mixin：

 styleResources: {
    scss: [
      '~/assets/style/variables.scss',
      '~/assets/style/mixins.scss'
    ],
  },

现在，让我们用我们的 mixin 更新我们的按钮组件：

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: top;
    text-decoration: none;
    outline: none;
    @include center-item;

    // variant
    &--primary {
        background-color: $primary;
        color: $white;
    }
}
</style>

功能

SASS 中的函数用于编写可以在代码的其他部分重用的复杂操作或行为。

让我们创建一个函数来处理我们的应用程序的媒体查询。

// assets/style/functions.scss

// Get the difference between 2 numbers.
@function minus($param1, $param2) {
  @return $param1 - $param2;
}

// Get the sum of 2 numbers.
@function add($param1, $param2) {
  @return $param1 + $param2;
}

这是一个函数可以用于什么的基本示例。更复杂的情况，例如计算百分比，也可以完成。

让我们在 Nuxt 配置中导入我们的 mixin：

 styleResources: {
    scss: [
      '~/assets/style/variables.scss',
      '~/assets/style/mixins.scss',
      '~/assets/style/functions.scss'
    ],
 },

让我们用我们的函数更新我们的按钮组件：

<!-- src/components/button/button.vue -->
<template>
    <button
        class="app-button"
    >
      <slot></slot>
    </button>
</template>

<style lang="scss">
  .app-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: top;
    text-decoration: none;
    outline: none;
    @include center-item;
    width: minus(30px, 100%);

    // variant
    &--primary {
        background-color: $primary;
        color: $white;
    }
}
</style>