bulma_bulma和symfonys webpack再来一次

bulma

I recently had to integrate Bulma into Webpack encore for a new initiative at work. I was unable to find any resources specifically dedicated to the integration of these two technologies so I thought I’d write a post. The integration is pretty straight forward, however, I did run into some compilation errors that stemmed from the Bulma Sass files, so I’ll also be sharing the fixes I found for them.

最近，我不得不将Bulma集成到Webpack encore中 ，以进行一项新的工作。 我找不到任何专门用于这两种技术集成的资源，所以我想写一篇文章。 集成非常简单，但是，我确实遇到了一些来自Bulma Sass文件的编译错误，因此，我还将分享为他们找到的修复程序。

依存关系 (Dependencies)

We first need to install a few dependencies:

我们首先需要安装一些依赖项：

• Bulma : the framework itself by running npm install bulma --save-dev

  Bulma ：框架本身通过运行npm install bulma --save-dev

• node-sass: because Bulma is built with Sass, we need to install this to will allow us to compile Sass into CSS. Run npm install node-sass --save-dev

  node-sass ：因为Bulma是用Sass构建的，所以我们需要安装它以允许我们将Sass编译成CSS。 运行npm install node-sass --save-dev

• sass-loader : is a loader for Webpack which compiles SCSS/Sass files. Run npm install sass-loader . Note: Upon installing it installs it at the latest version; however I ran into some issues with it so I had to go back to version 7.0.1 → npm install sass-loader@7.0.1 --save-dev

  sass-loader ：是Webpack的加载器，可编译SCSS / Sass文件。 运行npm install sass-loader 。 注意 ：安装后，将以最新版本安装。 但是我遇到了一些问题，所以我不得不回到版本7.0.1→ npm install sass-loader@7.0.1 --save-dev

• sass-loader: This package helps with injecting our styles into our DOM. Run: npm install style-loader --save-dev

  sass-loader ：此软件包有助于将样式注入到DOM中。 运行： npm install style-loader --save-dev

组态： (Configuration:)

Now we need to configure a couple of files:

现在我们需要配置几个文件：

• bulmaStyles.scssa new scss file we’ll be creating, but you can name yours whatever you’d like.

  bulmaStyles.scss我们将创建一个新的scss文件，但是您可以根据需要命名。

• webpack.config.js that should already be previously set up with your webpack encore. You can check out this other post I wrote about it, or refer to the official docs

  webpack.config.js ，之前应该已经通过webpack encore进行了设置 。 你可以看看这个其他职位我写它，或参阅官方文档

• base.html.twigin your views template.

  视图模板中的base.html.twig 。

bulmaStyles.scss:

bulmaStyles.scss：

In this file you get to add or remove Bulma styles or modify them to make them your own: you are in control of variable color names, font variable names, whether you would like to import a specific Google font. Bulma is written in Sass and made out of 39 Sass files that you may or may not import depending on your preferences. This means that you can leverage this modularity to reduce the build size of your Bulma file’s build size thus potentially scoring points for performance on your app or site.

在此文件中，您可以添加或删除布尔玛样式，也可以对其进行修改以使其成为您自己的样式 ：无论您要导入特定的Google字体，您都可以控制变量颜色名称，字体变量名称。 Bulma是用Sass编写的，由39个Sass文件组成，您可以根据自己的喜好导入或不导入。 这意味着您可以利用此模块化来减小Bulma文件的构建大小的构建大小，从而潜在地为应用程序或网站上的性能打分。

webpack.config.js:

webpack.config.js：

Errors:

错误：

“File to import not found or unreadable” error:

“找不到要导入的文件或不可读的文件”错误：

The configuration here is swift, we only need to do 2 things:

这里的配置很快，我们只需要做两件事：

• enable Sass/SCSS support by un-commenting out the enableSassLoader() feature. (see line 61 below)

  通过取消注释enableSassLoader()功能来启用Sass / SCSS支持。 (请参见下面的第61行)

• adding a style entry with a name of your choice and the path to the new SCSS file we created above containing our Bulma styles and Sass modules .addStyleEntry(‘Bulma’, ‘./assets/css/Sass-SCSS/bulmaStyles.scss’) (see line 29 below)

  添加一个带有您选择的名称的样式条目以及我们在上面创建的包含Bulma样式和Sass模块的新SCSS文件的路径.addStyleEntry('Bulma', './assets/css/Sass-SCSS/bulmaStyles.scss') Sass-SCSS/ .addStyleEntry('Bulma', './assets/css/Sass-SCSS/bulmaStyles.scss') (请参阅下面的第29行)

Below is a gist of what my webpack.config.js file looks like.

以下是我的webpack.config.js文件外观的要点。

base.html.twig:

base.html.twig：

In this twig view, we simply need to add an encore_entry_link_tags() function and pass in ‘Bulma’ or whichever name you passed into your style entry earlier in your webpack.config.js file. This is very much like adding a stylesheet link to an index.html file.

在这个树枝视图中，我们只需要添加一个encore_entry_link_tags()函数并传入“布尔玛”或您早先在webpack.config.js文件中传入样式条目的任何名称。 这非常类似于将样式表链接添加到index.html文件。

There we have it, hope this helped you out, thanks for reading, bye.

我们准备好了，希望对您有所帮助，感谢您的阅读，再见。

资源资源 (Resources)

• Bulma

  布尔玛

• Webpack encore

  Webpack再来一次

• Sass

  萨斯

• node-sass

  节点ass

• sass-loader

  萨斯装载机

• style-loader

  样式加载器

• Bulma styles

  布尔玛风格

翻译自: https://medium.com/weekly-webtips/bulma-and-symfonys-webpack-encore-f79f48c328aa

bulma