title: Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader
body: <p>I'm just getting started with Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader and I'm a little lost. </p>
  
  <p>What I'd like to do is use the SASS version of bootstrap with my SPA Vue.js code. I want to do this so my bootstrap customisations can be done using SASS. Here is what I've done:</p>
  
  <ul>
  <li>Created a new Vue.js + webpack project with vue-cli.</li>
  <li>Installed bootstrap-sass and sass-loader.</li>
  <li><p>Added the following to build/webpack.base.conf.js: </p>
  
  <pre><code>{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
  { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }
  </code></pre></li>
  <li><p>Created src/style.scss with one line: <code>@import 'bootstrap';</code></p></li>
  <li>Added this line to the top of src/main.js: <code>import './style.scss'</code></li>
  </ul>
  
  <p>When I now run <code>npm run dev</code> I get the following error:</p>
  
  <pre><code>ERROR in ./src/main.js
  Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
  @ ./src/main.js 3:0-25
  </code></pre>
  
  <p>I'm not sure why this isn't working. </p>
  
  <p>Also, related to this question, how do I get access to Bootstrap SASS variables inside my Vue components? If I understand what is going on here, the SASS will be compiled to CSS before being included inline in main.js meaning there is no access to any Bootstrap variables in my components. Is there a way to achieve this?</p>