<commit_before>{{! template-lint-disable block-indentation }}
<h1 id="addon-options">Importing assets</h1>

<h2 id="configuration-with-blueprint">Configuration using the default blueprint</h2>

<p>By default, ember-bootstrap installs Bootstrap 3 and uses the installed preprocessor if there is one. You can use
    the ember-bootstrap default blueprint to switch Bootstrap version or preprocessor. Simply re-run the default
    blueprint like</p>

<pre class="highlight">ember generate ember-bootstrap --bootstrap-version=4 --preprocessor=sass
</pre>

<p>The <code>--bootstrap-version</code> can be "3" or "4" and if omitted, defaults to the currently configured version,
    if present, or "3". The <code>--preprocessor</code> can be "none", "less", or "sass". The blueprint will use the
    currently installed preprocessor as its cue if this option is omitted. We explicitly support ember-cli-less and
    ember-cli-sass. You will need to install and configure other preprocessors yourself.</p>

<p>The default blueprint does the following:</p>

<ul>
    <li>
        Removes any unneeded versions of bootstrap and bootstrap-sass from <code>package.json</code>
        and <code>bower.json</code>
    </li>
    <li>
        Installs the appropriate version of bootstrap or bootstrap-sass as an npm package
    </li>
    <li>
        Removes unneeded dependencies on ember-cli-less and ember-cli-sass
    </li>
    <li>
        Installs ember-cli-less or ember-cli-sass if appropriate
    </li>
    <li>
        Creates <code>app.less</code> or <code>app.scss</code> if appropriate and it doesn't exist
    </li>
    <li>
        Adds the appropriate "@import" statement to your <code>app.less</code> or <code>app.scss</code> if it&apos;s
        not there already
    </li>
    <li>
        Safely edits your <code>ember-cli-build.js</code> to ensure the proper ember-bootstrap settings for your configuration
    </li>
</ul>

<h2 id="importing-css-assets">Importing static CSS Assets</h2>

<p>
  When not using a CSS preprocessor (see below) ember-bootstrap will automatically import the static Bootstrap CSS into
  your ember-cli build. In situations where you prefer to use another strategy for importing Bootstrap CSS,
  you can opt out of CSS import by setting the <code>importBootstrapCSS</code> option to
  false in your <code>ember-cli-build.js</code>:
</p>

<div>
  <pre class="highlight"><code>//your-bootstrap-app/ember-cli-build.js

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        'ember-bootstrap': {
            'importBootstrapCSS': false
        }
    });

    return app.toTree();
};
  </code></pre>
</div>

<p>
  Bootstrap comes with an optional theme CSS with various visual enhancements. To include this file you can import it
  by setting <code>importBootstrapTheme</code> to true in the 'ember-bootstrap' config of your
  <code>ember-cli-build.js</code>.
</p>


<h2>Using CSS preprocessors</h2>

<p>
  ember-bootstrap supports <a href="http://lesscss.org/" target="_blank" rel="noopener">Less</a> (with
  <a href="https://github.com/gdub22/ember-cli-less" target="_blank" rel="noopener">ember-cli-less</a>)
  as well as <a href="http://sass-lang.com/" target="_blank" rel="noopener">Sass</a> (with
  <a href="https://github.com/aexmachina/ember-cli-sass" target="_blank" rel="noopener">ember-cli-sass</a>)
  as CSS preprocessors. When it detects one of these upon first installation of ember-bootstrap, it will install the
  necessary packages ('bootstrap' itself or 'bootstrap-sass') and add an <code>@import</code> statement to your
  <code>app.less</code> or <code>app.scss</code> file respectively:
</p>

<pre><code class="language-less">// app.less
@import "ember-bootstrap/bootstrap";
</code></pre>

<p>This will add the whole bootstrap stylesheets allowing you to customize them easily using the available variables.</p>

{{#bs-alert type="warning"}}
  <strong>Important note:</strong> this only works when you have the CSS preprocessor addon installed before installing ember-bootstrap
  itself. If that is not the case, make sure to run the default install blueprint after installing the preprocessor addon:
  <code>ember generate ember-bootstrap</code>! This will execute the necessary setup steps as described above.
{{/bs-alert}}

<p>You can also selectively import only the assets your app needs:</p>

<pre><code class="language-less">// app.less
@import "ember-bootstrap/variables.less";
@import "ember-bootstrap/mixins.less";
@import "ember-bootstrap/normalize.less";
@import "ember-bootstrap/scaffolding.less";
@import "ember-bootstrap/type.less";
@import "ember-bootstrap/buttons.less";
</code></pre>

<h2>Importing the Bootstrap Glyphicons font</h2>
<p>By default the icon font that comes with Bootstrap is added to your app's assets folder.
  When you do not want to use it (maybe because of replacing it for
  <a href="https://github.com/martndemus/ember-font-awesome" target="_blank" rel="noopener">Font Awesome</a>),
  you can opt out of the font import by setting the <code>importBootstrapFont</code> option
  to false in your <code>ember-cli-build.js</code>:</p>

<div><pre class="highlight"><code>//your-bootstrap-app/ember-cli-build.js

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        'ember-bootstrap': {
            'importBootstrapFont': false
        }
    });

    return app.toTree();
};
</code></pre>
</div><commit_msg>Updated importing assets guide to include sass examples<commit_after>{{! template-lint-disable block-indentation }}
<h1 id="addon-options">Importing assets</h1>

<h2 id="configuration-with-blueprint">Configuration using the default blueprint</h2>

<p>By default, ember-bootstrap installs Bootstrap 3 and uses the installed preprocessor if there is one. You can use
    the ember-bootstrap default blueprint to switch Bootstrap version or preprocessor. Simply re-run the default
    blueprint like</p>

<pre class="highlight">ember generate ember-bootstrap --bootstrap-version=4 --preprocessor=sass
</pre>

<p>The <code>--bootstrap-version</code> can be "3" or "4" and if omitted, defaults to the currently configured version,
    if present, or "3". The <code>--preprocessor</code> can be "none", "less", or "sass". The blueprint will use the
    currently installed preprocessor as its cue if this option is omitted. We explicitly support ember-cli-less and
    ember-cli-sass. You will need to install and configure other preprocessors yourself.</p>

<p>The default blueprint does the following:</p>

<ul>
    <li>
        Removes any unneeded versions of bootstrap and bootstrap-sass from <code>package.json</code>
        and <code>bower.json</code>
    </li>
    <li>
        Installs the appropriate version of bootstrap or bootstrap-sass as an npm package
    </li>
    <li>
        Removes unneeded dependencies on ember-cli-less and ember-cli-sass
    </li>
    <li>
        Installs ember-cli-less or ember-cli-sass if appropriate
    </li>
    <li>
        Creates <code>app.less</code> or <code>app.scss</code> if appropriate and it doesn't exist
    </li>
    <li>
        Adds the appropriate "@import" statement to your <code>app.less</code> or <code>app.scss</code> if it&apos;s
        not there already
    </li>
    <li>
        Safely edits your <code>ember-cli-build.js</code> to ensure the proper ember-bootstrap settings for your configuration
    </li>
</ul>

<h2 id="importing-css-assets">Importing static CSS Assets</h2>

<p>
  When not using a CSS preprocessor (see below) ember-bootstrap will automatically import the static Bootstrap CSS into
  your ember-cli build. In situations where you prefer to use another strategy for importing Bootstrap CSS,
  you can opt out of CSS import by setting the <code>importBootstrapCSS</code> option to
  false in your <code>ember-cli-build.js</code>:
</p>

<div>
  <pre class="highlight"><code>//your-bootstrap-app/ember-cli-build.js

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        'ember-bootstrap': {
            'importBootstrapCSS': false
        }
    });

    return app.toTree();
};
  </code></pre>
</div>

<p>
  Bootstrap comes with an optional theme CSS with various visual enhancements. To include this file you can import it
  by setting <code>importBootstrapTheme</code> to true in the 'ember-bootstrap' config of your
  <code>ember-cli-build.js</code>.
</p>


<h2>Using CSS preprocessors</h2>

<p>
  ember-bootstrap supports <a href="http://lesscss.org/" target="_blank" rel="noopener">Less</a> (with
  <a href="https://github.com/gdub22/ember-cli-less" target="_blank" rel="noopener">ember-cli-less</a>)
  as well as <a href="http://sass-lang.com/" target="_blank" rel="noopener">Sass</a> (with
  <a href="https://github.com/aexmachina/ember-cli-sass" target="_blank" rel="noopener">ember-cli-sass</a>)
  as CSS preprocessors. When it detects one of these upon first installation of ember-bootstrap, it will install the
  necessary packages ('bootstrap' itself or 'bootstrap-sass') and add an <code>@import</code> statement to your
  <code>app.less</code> or <code>app.scss</code> file respectively:
</p>

<pre><code class="language-less">// app.less
@import "ember-bootstrap/bootstrap";
</code></pre>

<pre><code class="language-sass">// app.scss
@import "ember-bootstrap/bootstrap";
</code></pre>

<p>This will add the whole bootstrap stylesheets allowing you to customize them easily using the available variables.</p>

{{#bs-alert type="warning"}}
  <strong>Important note:</strong> this only works when you have the CSS preprocessor addon installed before installing ember-bootstrap
  itself. If that is not the case, make sure to run the default install blueprint after installing the preprocessor addon:
  <code>ember generate ember-bootstrap</code>! This will execute the necessary setup steps as described above.
{{/bs-alert}}

<p>You can also selectively import only the assets your app needs:</p>

<pre><code class="language-less">// app.less
@import "ember-bootstrap/variables.less";
@import "ember-bootstrap/mixins.less";
@import "ember-bootstrap/normalize.less";
@import "ember-bootstrap/scaffolding.less";
@import "ember-bootstrap/type.less";
@import "ember-bootstrap/buttons.less";
</code></pre>

<pre><code class="language-sass">// app.scss
@import "ember-bootstrap/bootstrap/variables.scss";
@import "ember-bootstrap/bootstrap/mixins.scss";
@import "ember-bootstrap/bootstrap/normalize.scss";
@import "ember-bootstrap/bootstrap/scaffolding.scss";
@import "ember-bootstrap/bootstrap/type.scss";
@import "ember-bootstrap/bootstrap/buttons.scss";
</code></pre>

<h2>Importing the Bootstrap Glyphicons font</h2>
<p>By default the icon font that comes with Bootstrap is added to your app's assets folder.
  When you do not want to use it (maybe because of replacing it for
  <a href="https://github.com/martndemus/ember-font-awesome" target="_blank" rel="noopener">Font Awesome</a>),
  you can opt out of the font import by setting the <code>importBootstrapFont</code> option
  to false in your <code>ember-cli-build.js</code>:</p>

<div><pre class="highlight"><code>//your-bootstrap-app/ember-cli-build.js

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        'ember-bootstrap': {
            'importBootstrapFont': false
        }
    });

    return app.toTree();
};
</code></pre>
</div>
{'fraction_non_alphanumeric': 0.12902677433064175, 'fraction_numerical': 0.002889927751806205, 'mean_word_length': 4.058469475494411, 'pattern_counts': {'":': 0, '<': 243, '<?xml version=': 0, '>': 243, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6955739', 'n_tokens_mistral': 3631, 'n_tokens_neox': 3547, 'n_words': 1162}