123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- ---
- title: With node-sass
- layout: documentation
- doc-tab: customize
- doc-subtab: node-sass
- breadcrumb:
- - home
- - documentation
- - customize
- - customize-node-sass
- ---
- {% capture init %}
- npm init
- {% endcapture %}
- {% capture step_1 %}
- <div class="content">
- <p>
- In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then type the following command:
- </p>
- </div>
- {% highlight bash %}{{ init }}{% endhighlight %}
- <div class="content">
- <p>
- 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>.
- </p>
- </div>
- {% endcapture %}
- {% capture dependencies %}
- npm install node-sass --save-dev
- npm install bulma --save-dev
- {% endcapture %}
- {% capture package %}
- {
- "name": "mybulma",
- "version": "1.0.0",
- "main": "sass/mystyles.scss",
- "license": "MIT",
- "devDependencies": {
- "bulma": "^0.7.1",
- "node-sass": "^4.9.2"
- }
- }
- {% endcapture %}
- {% capture step_2 %}
- <div class="content">
- <p>
- You only need <strong>2 packages</strong> to customize Bulma: <code>node-sass</code> and <code>bulma</code> itself.
- </p>
- </div>
- {% highlight bash %}{{ dependencies }}{% endhighlight %}
- <div class="content">
- <p>
- Your <code>package.json</code> should look like this at this point.
- </p>
- </div>
- {% highlight bash %}{{ package }}{% endhighlight %}
- {% endcapture %}
- {% capture scripts %}
- "scripts": {
- "css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
- "css-watch": "npm run css-build -- --watch",
- "start": "npm run css-watch"
- }
- {% endcapture %}
- {% capture npm_build %}
- npm run css-build
- {% endcapture %}
- {% capture npm_build_success %}
- Rendering Complete, saving .css file...
- Wrote CSS to /path/to/mybulma/css/mystyles.css
- {% endcapture %}
- {% capture npm_watch %}
- npm start
- {% endcapture %}
- {% capture step_5 %}
- <div class="content">
- <p>
- To build a CSS file from a Sass file, we can use <strong>node scripts</strong>. In <code>package.json</code>, add the following:
- </p>
- </div>
- {% highlight html %}{{ scripts }}{% endhighlight %}
- <div class="content">
- <ul>
- <li>
- <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
- </li>
- <li>
- <code>css-watch</code> builds the CSS and watches for changes
- </li>
- <li>
- <code>start</code> is simply a shortcut for <code>css-watch</code>
- </li>
- </ul>
- <p>
- To test it out, go in your <strong>terminal</strong> and run the following command:
- </p>
- {% highlight bash %}{{ npm_build }}{% endhighlight %}
- </div>
- <div class="content">
- <p>
- If set up correctly, you will see the following message:
- </p>
- </div>
- {% highlight bash %}{{ npm_build_success }}{% endhighlight %}
- <div class="content">
- <p>
- <strong>Reload</strong> the page and it should be styled like this:
- </p>
- </div>
- {%
- include components/figure.html
- path="customize/custom-bulma-02-default"
- extension="png"
- alt="Bulma default styles"
- width="600"
- height="300"
- caption="Bulma's default styles"
- %}
- <div class="content">
- <p>
- To <strong>watch for changes</strong>, just launch the following command:
- </p>
- </div>
- {% highlight bash %}{{ npm_watch }}{% endhighlight %}
- {% endcapture %}
- {% include components/step.html
- title='1. Create a <code style="white-space: nowrap;">package.json</code> file'
- content=step_1
- %}
- <hr>
- {% include components/step.html
- title="2. Install the dev dependencies"
- content=step_2
- %}
- <hr>
- {% include steps/create-sass-file.html
- number="3"
- path="../node_modules"
- %}
- <hr>
- {% include steps/create-html-page.html
- number="4"
- %}
- <hr>
- {% include components/step.html
- title="5. Add node scripts to build your CSS"
- content=step_5
- %}
- <hr>
- {% include steps/add-custom-styles.html
- number="6"
- %}
|