title: How to override materializecss sass variables in vue?
body: <p>I'd like to change variables in materialize <a href="https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss" rel="nofollow noreferrer">_variables.scss</a> e.g.</p>
  
  <pre><code>$primary-color: color("materialize-red", "lighten-2") !default;
  $primary-color-light: lighten($primary-color, 15%) !default;
  $primary-color-dark: darken($primary-color, 15%) !default;
  /*...*/
  </code></pre>
  
  <p>In my Vue 2 <code>main.js</code> I include materialize style like this</p>
  
  <pre><code>require('materialize-css/sass/materialize.scss');
  </code></pre>
  
  <p>Because of <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_" rel="nofollow noreferrer">!default</a> I guess I need to include my <code>_variables.scss</code> before including materialize, but I don't know how.</p>
  
  <p>So what's the proper way to set my own variables e.g. <code>$primary-color: color("blue", "lighten-2")</code> (I want to use predefined palette from materialize <a href="https://github.com/Dogfalo/materialize/blob/master/sass/components/_color.scss" rel="nofollow noreferrer">_colors.scss</a>)?</p>
  
  <p><strong>EDIT 1:</strong> I installed vue2 with <a href="https://github.com/vuejs/vue-cli" rel="nofollow noreferrer">vue-cli</a></p>
  
  <p><strong>EDIT 2:</strong> </p>
  
  <p>Folder structure:</p>
  
  <pre><code>├── build/
  ├── config/
  ├── dist/
  ├── node_modules/
  │    ├── materialize-css
  ├── src/
  │    ├── components
  │    ├── router
  │    └── main.js
  ├── package.json
  └── index.html
  </code></pre>