CODEWITHSUNDEEP
csssasswebpackvue.js
Konrad Viltersten
Konrad Viltersten

Reputation: 39268

Using SASS in Vue components the right way

In my Vue component, I changed the language from the default CSS to the explicitly set SCSS, like this.

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

I also changed the webpack.config.js according to this post by LinusBorg, so it looks like this.

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" } }
}

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

Module not found: Error: Cannot resolve module 'scss-loader'

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

npm install scss-loader --save-dev

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.

Should I use style lang="sass" to being with?

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

Upvotes: 3

Views: 3262

Answers (1)

Saurabh
Saurabh

Reputation: 73649

You have to install sass-loader and node-sass and it's resolving the problem not hiding it.

sass-loader documentation clearly says:

The sass-loader requires node-sass and webpack as peerDependency. Thus you are able to specify the required versions accurately.

and here are peerdependency from it's package.json:

"peerDependencies": {
   "node-sass": "^3.4.2 || ^4.0.0",
    .....

Which means sass-loader will work with these versions of node-sass.

It requires it in the very 4th line of it's code - sass-loader/index.js:

'use strict';

var utils = require('loader-utils');
var sass = require('node-sass');

Once you have it installed, you can do any of following:

<style lang="scss">
or
<style lang="sass">

as you are going to use same loader for both of these.

Upvotes: 2

Related Questions