nuxt.js 全局 js_Nuxt.js，布尔玛和萨斯的发展

nuxt.js 全局 js

TL;DR: Overcome Nuxt.js, Bulma and Sass shenanigans with this quick article to help you start developing your next App in less than 10 minutes.

TL; DR：这篇简短的文章克服了Nuxt.js，Bulma和Sass的恶作剧，可帮助您在不到10分钟的时间内开始开发下一个App。

Hi everyone ❤️! Few days ago I found myself struggling a bit to put Nuxt.js, Bulma and Sass to work correctly and the info I found on google didn't help too much.

大家好❤️！ 几天前，我发现自己在努力使Nuxt.js ， Bulma和Sass正常工作，而我在Google上发现的信息并没有太大帮助。

Most of the configurations I found were not working, because they were outdated or didn't explain quite well how to do it. So I deep dived a little bit on this subject and decided to write an article to help you do the same in less than 10 minutes.

我发现的大多数配置都无法使用，因为它们已经过时或没有很好地解释如何做到。 因此，我深入探讨了这个问题，并决定写一篇文章来帮助您在不到10分钟的时间内完成相同的工作。

Let's have some fun and get our hands dirty while grokking a few concepts needed to do this.

让我们玩得开心，弄脏我们的双手，同时思考一些这样做的必要概念。

1.搭建Nuxt.js (1. Scaffolding Nuxt.js)

Nowadays, to get started quickly with Nuxt.js we use a scaffolding tool called create-nuxt-app. Please make sure you have npx installed on your machine.

如今，为了快速开始使用Nuxt.js，我们使用了一个名为create-nuxt-app的脚手架工具。 请确保您在计算机上安装了npx 。

Let's open a terminal and do: npx create-nuxt-app nuxt-bulma-sass, where nuxt-bulma-sass is the name of the project we're scaffolding for the purpose of this article.

让我们打开一个终端并执行以下操作： npx create-nuxt-app nuxt-bulma-sass ，其中nuxt-bulma-sass是我们为本文目的而进行的项目的名称。

create-nuxt-app will ask you some questions before creating the scaffold. For the purpose of this article I've chosen the following setup:

创建支架之前， create-nuxt-app会问您一些问题。 出于本文的目的，我选择了以下设置：

So, the next step will be to change directory into our project folder:

因此，下一步是将目录更改为我们的项目文件夹：

cd nuxt-bulma-sass

cd nuxt-bulma-sass

and launch the project with: yarn run dev. (you can also use npm if you like it)

并使用以下命令启动该项目： yarn run dev 。 (如果愿意，也可以使用npm)

At this point we have our project running:

至此，我们的项目正在运行：

And if we open our browser on localhost:3000 we'll be getting this screen:

如果我们在localhost：3000上打开浏览器，将会得到以下屏幕：

So at this point we have the pages/index.vue on the screen, which is the first page to be rendered in your project by default.

因此，此时我们在屏幕上有pages / index.vue，这是默认情况下要在您的项目中呈现的第一页。

Let's replace the content of this file by the following one:

让我们用以下内容替换该文件的内容：

If we inspect our page in the browser we see we got bulma installed because section is formatted according to it.

如果我们在浏览器中检查页面， 则会看到我们安装了bulma，因为section是根据它格式化的。

Easy peasy lemon squeezy.

柠檬容易挤。

Let's add a class and choose some colors:

让我们添加一个类并选择一些颜色：

What if we want to nest .hello-nuxt inside .edo-theme? We're going to need SASS to be able to do it.

如果我们想筑巢怎么办。 你好，里面。 edo主题 ？ 我们将需要SASS来做到这一点。

2.添加Sass (2. Adding Sass)

So, to add Sass to our project we'll need to stop our running app (Ctrl+c) and do the following:

因此，要将Sass添加到我们的项目中，我们需要停止正在运行的应用程序(Ctrl + c)并执行以下操作：

yarn add node-sass sass-loader --dev

yarn add node-sass sass-loader --dev

These are the two packages needed as dev-dependencies to be able to have Sass in our boilerplate.

这是需要依赖开发人员才能将Sass包含在我们的样板中的两个软件包。

Note that we're adding it as a dev dependency because we only need it while developing and at build time. After that Sass is transformed into CSS and we don't need it anymore.

请注意，我们将其添加为开发依赖项，因为我们仅在开发时和构建时需要它。 之后， Sass转换为CSS ，我们不再需要它了。

Let's sneak peek my package.json for you to check it:

让我们偷看一下我的package.json来检查它：

Okay everyone ❤️, at this point we're able to nest the classes we wanted to.

好的，每个人❤️，在这一点上，我们可以嵌套想要的类。

Let's run our boilerplate again: yarn run dev and do the tweaks needed ?

让我们再次运行样板： yarn run dev并进行所需的调整吗？

Noice! We already did a lot today! Go grab a coffee ☕, I'll wait for you here ?

ice！ 今天我们已经做了很多事情！ 去喝咖啡grab，我在这里等你吗？

Okay, let's abstract things a bit and create this file ~/assets/scss/main.scss and put there some classes and variables:

好的，让我们抽象一些东西，然后创建这个文件〜/ assets / scss / main.scss，并放置一些类和变量：

Nice! It's working!

真好！ 工作正常！

Now we have two problems:

现在我们有两个问题：

1. We need to import main.scss into each one of our pages/components, which is not nice. We want to import it only once and have it available in all our <style> "bags"
   我们需要将main.scss导入到我们的每个页面/组件中，这不是很好。 我们只想导入一次，并在所有<style>“ bags”中使用它

2. We can't use bulma sass variables (try to change the background-color from the .edo-theme class from $edo to $primary. We want to have bulma sass variables in order to override them and create new themes from there.

   我们不能使用buls sass变量(尝试将.edo-theme类的背景颜色从$ edo更改为$ primary 。我们希望拥有bulma sass变量以便覆盖它们并从那里创建新主题。

So... what if we want to use bulma sass variables?

所以...如果我们要使用bulma sass变量怎么办？

3.困难的部分来了，这使我花了一些时间来理解。 (3. Here comes the hard part which took me some time to understand.)

Bulma is being imported in the create-nuxt-app scaffold. When you do yarn run dev there's this hidden .nuxt folder into your nuxt-bulma-sass folder.

Bulma正在导入到create-nuxt-app支架中。 当您执行yarn run dev ，此隐藏项。 将nuxt文件夹放入您的nuxt-bulma-sass文件夹。

If you take a look at App.js there:

如果您在此处查看App.js：

You'll see that bulma is being imported from the node-modules when you launch dev environment.

启动开发环境时，您会看到正在从节点模块导入bulma。

So, importing bulma while launching nuxt.js scaffold is not okay if we want to override bulma sass variables.

因此，如果要覆盖bulma sass变量，则在启动nuxt.js支架时导入bulma是不可行的。

Don't despair, you don't have to throw your project away. Show must go on ?

别失望，您不必丢掉您的项目。 演出必须继续 ？

4.以正确的方式使用布尔玛？ (4. Using Bulma the right way ?)

How do we get bulma into our boilerplate the way we need?

我们如何以所需的方式使膨胀进入样板？

Let's start by commenting out @nuxtjs/bulma from the nuxt.config.js modules section (keep it on the package.json because what it does there is install bulma, it would be the same, AFAIK, as doing yarn add bulma).

让我们从nuxt.config.js模块部分中的@ nuxtjs / bulma注释开始(将其保留在package.json上，因为它所做的是安装bulma，这与AFAIK一样，就像执行yarn add bulma )。

Stop your running environment and do yarn run dev again.

停止运行环境，然后再次执行yarn run dev 。

If you take a look into ./nuxt/App you'll see that it's not importing bulma anymore.

如果您查看./nuxt/App，您会发现它不再导入bulma。

So now what we have to do is to go to our main.scss file and import it in the last line of the file.

因此，现在我们要做的是转到main.scss文件并将其导入文件的最后一行。

I've also imported bulma/sass/utilities/_all.sass for us to have the sass variables with the colors there.

我还导入了bulma / sass / utilities / _all.sass，让我们在其中具有颜色的sass变量。

Of course later you can improve it by only importing exactly what you need. But that's another story for another article ?

当然，以后您可以仅导入所需的内容来改进它。 但这是另一篇文章的另一个故事吗？

Well well, check your browser and see it working.

好吧，请检查您的浏览器并查看其是否正常运行。

5.对！ 这是工作宝贝！ (5. Yeah! It's working baby!)

Now the last problem! We don't want to import it into our <style> scaffold each time we want to use it. We want it to be available as a global anywhere in the boilerplate.

现在是最后一个问题！ 我们不想每次使用它时都将其导入到我们的<style>支架中。 我们希望它可以在样板中的任何地方以全局形式提供。

The solution for this is to import a package called @nuxtjs/style-resources.

解决方案是导入一个名为@ nuxtjs / style-resources的包 。

This package allows you to share variables, mixins, function across all files. No more imports needed on your <style> tag of each component or page.

该软件包允许您在所有文件之间共享变量，mixin，函数。 每个组件或页面的<style>标记上都不需要导入。

Just stop  your dev environment and do:

停止您的开发环境并执行以下操作：

yarn add @nuxjs/style-resources  Note: don't try to install it as a dev-dependency because it won't work correctly.

yarn add @nuxjs/style-resources注意：请勿尝试将其安装为开发依赖项，因为它无法正常工作。

Also, open your nuxt.config.js file and add '@nuxtjs/style-resources' to your modules key/value.

另外，打开您的nuxt.config.js文件，并将'@ nuxtjs / style-resources'添加到模块键/值。

You also need to add styleResources. Check how mine is after that ?

您还需要添加styleResources。 检查一下我的情况如何？

Do yarn run dev again and... no errors... but...

再次yarn run dev并...没有错误...但是...

CSS classes not being imported anymore.

CSS类不再被导入。

FML ??‍?☠️

FML ?? ‍☠️

6.最后调整 (6. Last tweak)

What's happening here?

这里发生了什么事？

So, from the point you import and use @nuxt/style-resources you can't import actual styles from the main.scss anymore just because they won't exist in the actual build.

因此，从导入和使用@ nuxt / style-resources的角度出发，您不再能够从main.scss中导入实际样式，因为它们在实际构建中将不存在。

So, to solve this problem:

因此，要解决此问题：

Stop your running the boilerplate again and open your nuxt.config.js:

再次停止运行样板并打开nuxt.config.js：

Add the main.scss path to the global css array, like this:

将main.scss路径添加到全局css数组，如下所示：

This way we make sure that global css styles are also imported into the scope of our templates.

这样，我们确保将全局css样式也导入到模板的范围内。

From this point on of course you can establish an architectural pattern for your css files, create independent variable, functions and mixins files and compose stuff with some extra @imports.

从这时起，您当然可以为CSS文件建立架构模式，创建自变量，函数和mixins文件，并使用一些额外的@imports编写内容。

In the styleResources object you have the option to include more files as you need them in your boilerplate.

在styleResources对象中，您可以选择在样板中包含更多文件。

Again, that's beyond the scope of this article which was to show you how to unblock from this tiny complexities that nuxt and its ecosystems introduce in our App's flow.

再次，这超出了本文的讨论范围，本文旨在向您展示如何摆脱nuxt及其生态系统在我们的App流程中引入的微小复杂性。

希望您喜欢它！ ❤️ (Hope you have enjoyed it! ❤️)

坚强并在代码上吗？ (Be Strong and Code On ?)

7.最后但并非最不重要的 (7. Last but not least)

You can clone my repo and play around with it.

您可以克隆我的存储库并试用它。

https://github.com/evedes/nuxt-bulma-sass

https://github.com/evedes/nuxt-bulma-sass

Thank you very much @ruiposse for reviewing this article and for mentoring me into the vue ecosystem. ❤️

非常感谢@ruiposse审阅本文并指导我进入vue生态系统。 ❤️

8.参考书目 (8. Bibliography)

01. Nuxtjs.org

01. Nuxtjs.org

02. Nuxt Style Resources

02. Nuxt样式资源

03. Bulma.io

03. Bulma.io

04. Some hours around google getting frustrated and seeing people also frustrated with this ?

04.围绕Google几个小时感到沮丧，看到人们对此也感到沮丧？

---

---

Hey! I'm Edo, a frontend engineer dedicated to the JavaScript stack. Nowadays I work mostly with React, Vue and all the ecosystem around.

嘿! 我是Edo，致力于JavaScript堆栈的前端工程师。 如今，我主要与React，Vue和周围的所有生态系统合作。

If you liked this article you can read more here.

如果您喜欢这篇文章，可以在这里阅读更多内容。

翻译自: https://www.freecodecamp.org/news/up-goind-with-nuxt-js-bulma-and-sass/

nuxt.js 全局 js