with-node-sass.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. ---
  2. title: With node-sass
  3. layout: documentation
  4. doc-tab: customize
  5. doc-subtab: node-sass
  6. breadcrumb:
  7. - home
  8. - documentation
  9. - customize
  10. - customize-node-sass
  11. ---
  12. {% capture init %}
  13. npm init
  14. {% endcapture %}
  15. {% capture step_1 %}
  16. <div class="content">
  17. <p>
  18. In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then type the following command:
  19. </p>
  20. </div>
  21. {% highlight bash %}{{ init }}{% endhighlight %}
  22. <div class="content">
  23. <p>
  24. This will launch an interactive setup to create <code>package.json</code>. When prompted for an <strong>entry point</strong>, enter <code>sass/mystyles.scss</code>.
  25. </p>
  26. </div>
  27. {% endcapture %}
  28. {% capture dependencies %}
  29. npm install node-sass --save-dev
  30. npm install bulma --save-dev
  31. {% endcapture %}
  32. {% capture package %}
  33. {
  34. "name": "mybulma",
  35. "version": "1.0.0",
  36. "main": "sass/mystyles.scss",
  37. "license": "MIT",
  38. "devDependencies": {
  39. "bulma": "^0.7.1",
  40. "node-sass": "^4.9.2"
  41. }
  42. }
  43. {% endcapture %}
  44. {% capture step_2 %}
  45. <div class="content">
  46. <p>
  47. You only need <strong>2 packages</strong> to customize Bulma: <code>node-sass</code> and <code>bulma</code> itself.
  48. </p>
  49. </div>
  50. {% highlight bash %}{{ dependencies }}{% endhighlight %}
  51. <div class="content">
  52. <p>
  53. Your <code>package.json</code> should look like this at this point.
  54. </p>
  55. </div>
  56. {% highlight bash %}{{ package }}{% endhighlight %}
  57. {% endcapture %}
  58. {% capture scripts %}
  59. "scripts": {
  60. "css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
  61. "css-watch": "npm run css-build -- --watch",
  62. "start": "npm run css-watch"
  63. }
  64. {% endcapture %}
  65. {% capture npm_build %}
  66. npm run css-build
  67. {% endcapture %}
  68. {% capture npm_build_success %}
  69. Rendering Complete, saving .css file...
  70. Wrote CSS to /path/to/mybulma/css/mystyles.css
  71. {% endcapture %}
  72. {% capture npm_watch %}
  73. npm start
  74. {% endcapture %}
  75. {% capture step_5 %}
  76. <div class="content">
  77. <p>
  78. To build a CSS file from a Sass file, we can use <strong>node scripts</strong>. In <code>package.json</code>, add the following:
  79. </p>
  80. </div>
  81. {% highlight html %}{{ scripts }}{% endhighlight %}
  82. <div class="content">
  83. <ul>
  84. <li>
  85. <code>css-build</code> takes <code>sass/mystyles.scss</code> as an input, and outputs <code>css/mystyles.css</code>, while omitting the source map
  86. </li>
  87. <li>
  88. <code>css-watch</code> builds the CSS and watches for changes
  89. </li>
  90. <li>
  91. <code>start</code> is simply a shortcut for <code>css-watch</code>
  92. </li>
  93. </ul>
  94. <p>
  95. To test it out, go in your <strong>terminal</strong> and run the following command:
  96. </p>
  97. {% highlight bash %}{{ npm_build }}{% endhighlight %}
  98. </div>
  99. <div class="content">
  100. <p>
  101. If set up correctly, you will see the following message:
  102. </p>
  103. </div>
  104. {% highlight bash %}{{ npm_build_success }}{% endhighlight %}
  105. <div class="content">
  106. <p>
  107. <strong>Reload</strong> the page and it should be styled like this:
  108. </p>
  109. </div>
  110. {%
  111. include components/figure.html
  112. path="customize/custom-bulma-02-default"
  113. extension="png"
  114. alt="Bulma default styles"
  115. width="600"
  116. height="300"
  117. caption="Bulma's default styles"
  118. %}
  119. <div class="content">
  120. <p>
  121. To <strong>watch for changes</strong>, just launch the following command:
  122. </p>
  123. </div>
  124. {% highlight bash %}{{ npm_watch }}{% endhighlight %}
  125. {% endcapture %}
  126. {% include components/step.html
  127. title='1. Create a <code style="white-space: nowrap;">package.json</code> file'
  128. content=step_1
  129. %}
  130. <hr>
  131. {% include components/step.html
  132. title="2. Install the dev dependencies"
  133. content=step_2
  134. %}
  135. <hr>
  136. {% include steps/create-sass-file.html
  137. number="3"
  138. path="../node_modules"
  139. %}
  140. <hr>
  141. {% include steps/create-html-page.html
  142. number="4"
  143. %}
  144. <hr>
  145. {% include components/step.html
  146. title="5. Add node scripts to build your CSS"
  147. content=step_5
  148. %}
  149. <hr>
  150. {% include steps/add-custom-styles.html
  151. number="6"
  152. %}