Nuxt.js 是一个用于创建 Vue.js 应用程序的开源框架。它的目标是帮助 Vue 开发人员利用一流的技术,让 Web 开发变得简单而强大。如果您以前使用过 React.js,那么您在进入一个新项目时会感到很熟悉。 Sass 是一个 CSS 预处理器,它将嵌套规则和混合等特殊功能添加到常规 CSS 中。 Sass 中使用的语法称为 SCSS。
在本文中,我将分享如何将 Sass 添加到您的 Nuxt.js 应用程序中,假设您对 Sass 一无所知,并且仅对 Nuxt/Vue 有基本的了解。以下是您将学到的内容:
- 如何创建 Nuxt.js 应用程序
- 如何将 SASS 添加到您的 Nuxt.js 应用程序中
- 如何建立你的文件夹/文件结构
- 如何从头开始构建组件并结合 SCSS(Sass 语法)来设置它的样式(我们将使用 mixin 功能来确保它工作:))
创建 Nuxt.js 应用程序
进入您的终端并导航到您希望项目生效的任何位置。无需添加新文件夹,安装命令将为您创建一个带有项目名称的文件夹。
假设您的系统上已经安装了 npm,请在终端中输入以下代码:
npm init nuxt-app <project-name>
进入全屏模式 退出全屏模式
在应用程序构建到本地系统之前,系统会提示您做出一些架构决策,例如首选编程语言、包管理器、UI 框架等。在本教程中,确保首选 UI 框架设置为无,首选编程语言设置为 JavaScript。
完成初始创建过程后,在您选择的 IDE 中打开项目。现在我们将回到终端并安装 Sass。
将 Sass 添加到您的 Nuxt 项目中。
在终端中,导航到新创建的 Nuxt 项目。将以下命令复制到终端并回车:
npm install --save-dev node-sass sass-loader@10 fibers @nuxtjs/style-resources
进入全屏模式 退出全屏模式
node-sass 安装 sass 功能。这是我在最近的项目中使用的,我知道。但是在 npm 上进行研究时,我发现维护人员建议改用 Dart Sass。因此,如果您刚刚开始一个新项目,请考虑学习 Dart Sass。
sass-loader@10 加载每个 Sass/SCSS 文件并将它们编译为 CSS。我们指定 @10 版本是因为它与 Nuxt 中使用的 webpack 版本兼容。仅使用此模块导入变量、mixin、函数(等等),因为它们在实际构建中不存在。导入实际样式会将它们包含在每个组件中,并且还会使您的构建/HMR 幅度变慢。不要这样做!”
fiber 自动启用与 sass 的同步编译(速度提升 2 倍)
@nuxtjs/style-loaders 确保您的变量和 mixin 在您的所有组件中都可用,而无需在每个文件中 > 导入它们。
“–save-dev”标志确保这些包不会在最终构建中结束,从而使我们的项目大小尽可能小。由于 SCSS/Sass 在构建时被编译为标准 CSS,因此不需要这些。
设置我们的项目文件夹
让我们将以下文件夹和文件添加到我们的根目录中:
📂资产
SCSS
┗ 📜mixins.scss
┗ 📜variables.scss
┗ 📂CSS
┗ 📜main.css
当我们开始向我们的组件添加样式时,我们将回到这些问题上。但是现在,我们需要将这些添加到我们的 Nuxt 配置文件中,以便 Nuxt 知道它们存在。
准备你的 Nuxt 配置文件
打开根目录中的 nuxt.config.js 文件。
现在将以下代码添加到您的nuxt.config.js文件中:
css: [
'~assets/css/main.css'
],
buildModules: [
'@nuxtjs/style-resources'
],
styleResources: {
scss: [
'~assets/scss/mixins.scss',
'~assets/scss/variables.scss'
]
},
进入全屏模式 退出全屏模式
我们通过添加 @nuxtjs/style-resources 作为构建时使用的模块来扩展框架的核心功能。
我们还告诉 Nuxt 我们的 SCSS 和 CSS 文件的位置。现在,所有 SCSS 变量和 mixin 都可以通过资源模块对我们的组件全局使用,因此在声明它们时无需将它们导入到我们的组件中。我们的 main.css 文件在整个项目中也是全局可用的。
Nuxt 组件的解剖结构
这是 Nuxt 组件的基本结构:
<template>
<div class="my-parent">
<p class="my-child">Hello World!</p>
</div>
</template>
<style lang="scss">
.my-parent {
background: black;
}
.my-child {
font-size: 1.25rem;
}
</style>
进入全屏模式 退出全屏模式
我们的组件是在<template>标签内构建的。并且模板标签内只能有一个顶级标签。只要 html 的其余部分嵌套在顶级标记中,在上面的示例中为<div class="my-parent">,组件就会正确呈现。
创建我们的第一个组件
在本教程中,我们将构建一个按钮。所以让我们创建一个按钮组件文件。我们’:
📂组件
┗ 📜Btn.scss
<template>
<button class="button">
<slot/>
</button>
</template>
<style lang="scss>
</style>
进入全屏模式 退出全屏模式
插槽标签的作用类似于将显示在我们的按钮组件内部的文本的占位符。因此,例如,当我们在项目中使用btn组件时,我们将这样做:
<btn>
Submit
</btn>
进入全屏模式 退出全屏模式
嵌套在btn标记内的文本由btn组件中的初始<slot/>标记说明。 “提交”将在其位置呈现。
创建一个 Mixin
在我们为按钮设置样式之前,让我们创建一个我们可以使用的 mixin。 mixin 本质上是一个 CSS 片段,可以在整个项目中多次使用。这是您需要了解的基本语法:
在mixins.scss文件中:
@mixin my-mixin-name {
border: solid 2x black;
border-radius: 10px;
}
进入全屏模式 退出全屏模式
然后,当在你常用的组件样式中声明这个 mixin 时,@include语句将 mixin 片段添加到 CSS 中:
<style lang="scss">
.my-class {
margin: 2rem 5%;
background: black;
@include my-mixin-name
padding: 1rem;
}
</style>
进入全屏模式 退出全屏模式
在本教程中,我们将创建一个使文本全部大写和粗体的 mixin。
将此添加到 mixins.scss 文件中:
@mixins bold-text {
text-transform: uppercase;
font-weight: 900;
}
进入全屏模式 退出全屏模式
现在我们可以在整个项目中使用这个 mixin。
使用 Mixin 为我们的组件设计样式
所以回到我们的btn组件中,我们将添加一些样式。我们将使用@includeSCSS 语法添加我们的 mixin:
<template>
<button class="my-btn">
<slot/>
</button>
</template>
<style lang="scss">
.my-btn {
width: 10rem;
height: 3rem;
border-radius: 10px;
background: black;
color: white;
@include bold-text;
padding: 1rem;
margin: 1rem auto;
}
</style>
进入全屏模式 退出全屏模式
在浏览器上渲染我们的按钮。
现在进入根目录下的pages文件夹,打开index.vue文件。删除嵌套在模板标签内的样板并添加btn组件,如下所示:
<template>
<btn>Hello World</btn>
</template>
<script>
export default {};
</script>
进入全屏模式 退出全屏模式
现在转到终端并输入以下命令:
npm run dev
进入全屏模式 退出全屏模式
将以下 URL 复制到浏览器中以查看您的按钮:
http://localhost:3000/
进入全屏模式 退出全屏模式
恭喜,您刚刚使用 Sass 构建了您的第一个 Nuxt 项目!
