title: svelte customising bootstrap5 using sass
body: <p>I am new to scss and I am trying to make use of bootstrap 5. so far I have managed to define a primary color, i seem to have run into this problem here <a href="https://stackoverflow.com/questions/67952873/customizing-bootstrap-5-button-colors-and-properties-in-it">Customizing bootstrap 5 button colors and properties in it</a> the background is red but the color of the text is black and i cannot seem to change it</p>
  <p>This is what I have in <code>src/main.scss</code></p>
  <pre class="lang-sass prettyprint-override"><code>// Variable overrides for bootstrap
  $primary: #fa2152;
  // $secondary: ;
  // $success: 
  // $info: 
  // $warning: 
  // $danger: 
  $light: #d8d8d8;
  // $dark: 
  
  .btn-primary {
      color: #fff;
  }
  
  @import &quot;../node_modules/bootstrap/scss/bootstrap&quot;;
  </code></pre>
  <p>my rollup file</p>
  <pre class="lang-js prettyprint-override"><code>import svelte from 'rollup-plugin-svelte';
  import commonjs from '@rollup/plugin-commonjs';
  import resolve from '@rollup/plugin-node-resolve';
  import livereload from 'rollup-plugin-livereload';
  import { terser } from 'rollup-plugin-terser';
  import sveltePreprocess from 'svelte-preprocess';
  import typescript from '@rollup/plugin-typescript';
  import css from 'rollup-plugin-css-only';
  import json from '@rollup/plugin-json';
  import replace from '@rollup/plugin-replace';
  import scss from &quot;rollup-plugin-scss&quot;;
  
  
  const production = !process.env.ROLLUP_WATCH;
  const site = process.env.SITE || 'defaults';
  
  function serve() {
      let server;
  
      function toExit() {
          if (server) server.kill(0);
      }
  
      return {
          writeBundle() {
              if (server) return;
              server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                  stdio: ['ignore', 'inherit', 'inherit'],
                  shell: true
              });
  
              process.on('SIGTERM', toExit);
              process.on('exit', toExit);
          }
      };
  }
  
  export default {
      input: 'src/main.ts',
      output: {
          sourcemap: !production,
          format: 'iife',
          name: 'app',
          file: 'public/build/bundle.js'
      },
      plugins: [
          replace({
              'process.env.NODE_ENV': JSON.stringify('production'),
              'process.env.SITE': JSON.stringify(site),
          }),
          svelte({
              preprocess: sveltePreprocess({
                  sourceMap: !production,
                  // defaults: {
                  //  style: 'scss'
                  //   },
                  postcss: {
                      plugins: [
                      //  require(&quot;tailwindcss&quot;),
                       require(&quot;autoprefixer&quot;),
                      ],
                    },
              }),
              compilerOptions: {
                  // enable run-time checks when not in production
                  dev: !production
              },
              emitCss: true,
          }),
          scss({watch: 'src', output: 'public/build/bootstrap.css'}),
          // we'll extract any component CSS out into
          // a separate file - better for performance
          css({ output: 'bundle.css'}),
  
          // If you have external dependencies installed from
          // npm, you'll most likely need these plugins. In
          // some cases you'll need additional configuration -
          // consult the documentation for details:
          // https://github.com/rollup/plugins/tree/master/packages/commonjs
          resolve({
              browser: true,
              dedupe: ['svelte']
          }),
          commonjs(),
          typescript({
              sourceMap: !production,
              inlineSources: !production
          }),
          json(),
          // In dev mode, call `npm run start` once
          // the bundle has been generated
          !production &amp;&amp; serve(),
  
          // Watch the `public` directory and refresh the
          // browser on changes when not in production
          !production &amp;&amp; livereload('public'),
  
          // If we're building for production (npm run build
          // instead of npm run dev), minify
          production &amp;&amp; terser()
      ],
      watch: {
          clearScreen: false
      }
  };
  </code></pre>
  <p>my public/index.html contains</p>
  <pre><code>&lt;link rel='icon' type='image/png' href='/favicon.png'&gt;
      &lt;!-- &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt; --&gt;
      &lt;link rel='stylesheet' href='/build/bootstrap.css'&gt;
      &lt;link rel='stylesheet' href='/global.css'&gt;
      &lt;link rel='stylesheet' href='/build/bundle.css'&gt;
  
      
  
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script defer src='/build/bundle.js'&gt;&lt;/script&gt;
  </code></pre>
  <p>I want to make the color of the button white.</p>
  <p>in <code>src/main.ts</code> i do</p>
  <pre class="lang-ts prettyprint-override"><code>import &quot;./main.scss&quot;;
  
  import App from &quot;./App.svelte&quot;;
  
  const app = new App({
    target: document.body,
    props: {},
  });
  
  export default app;
  </code></pre>