Using SASS in Vue components the right way
<p>In my Vue component, I changed the language from the default CSS to the explicitly set SCSS, like this.</p>

<pre><code>&lt;style lang="scss"&gt;
  div.bordy{ border: solid 3px red; }
&lt;/style&gt;
</code></pre>

<p>I also changed the <em>webpack.config.js</em> according to <a href="https://github.com/vuejs/vue-loader/issues/363" rel="nofollow noreferrer">this post by LinusBorg</a>, so it looks like this.</p>

<pre><code>module.exports = {
  entry: ["babel-polyfill", "./index.js"],
  output: { path: __dirname, filename: "bundle.js" },
  module: {
    loaders: [
      { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
      { test: /\.vue$/, loader: "vue" },
      // { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.s[a|c]ss$/, loader: "style!css!sass" }
    ]
  },
  babel: {
    presets: ["es2015", "stage-3"],
    plugins: ["transform-runtime"]
  },
  vue: { loaders: [{ scss: "style!css!sass" }] },
  resolve: { alias: { "vue$": "vue/dist/vue.common.js" } }
}
</code></pre>

<p>The guy explains that by doing so, we catch SCSS and map it to SASS. However, I'm getting an error saying the following.</p>

<blockquote>
  <p>Module not found: Error: Cannot resolve module 'scss-loader'</p>
</blockquote>

<p>I've tried installing the packages as shown below but it gave no difference in the output error.</p>

<pre><code>npm install scss-loader --save-dev
</code></pre>

<p>Here, I get uncertain and googlearching leads me to more confusion because I'm reading hints in all possible directions, not rarely commented with angry shouts of not resolving the issue.</p>

<p>Should I use <code>style lang="sass"</code> to being with? </p>

<p>When I try that, I have to install <em>node-sass</em> and I'm not sure if I'm resolving the problem or hiding it...</p>