CODEWITHSUNDEEP
meteorionic-frameworksassionic2
user3415686
user3415686

Reputation: 579

How to overwrite Ionic sass variables with driftyco:ionic meteor package

I use driftyco:ionic meteor package for my project and i want to change the "royal" color. Thats why, i want to know how to overwrite properly Ionic sass variables with driftyco:ionic meteor package.

Thant you for your help

Upvotes: 2

Views: 187

Answers (1)

pors
pors

Reputation: 4064

Adding the driftyco:ionic meteor package results in a single CSS stylesheet that you can import.

In your HTML e.g.:

<head>
  <title>ionic</title>
</head>
<body>
  <h1>Welcome to Meteor!</h1>
    {{> hello}}
</body>
<template name="hello">
  <div class="bar bar-header bar-royal"><h1 class="title">Nice bar</h1></div>
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

CSS, simply overwrite the classes you want to change:

@import '.meteor/local/build/programs/web.browser/merged-stylesheets.css';

.bar.bar-royal {
    background-color: #aa0033;
}

However, I recommend to make use of SCSS though, it makes your life much easier. Simply copy the scss directory to your project and use this package to compile it.

Upvotes: 2

Related Questions