Using SASS in Vue components the right way

Question

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...

Saurabh · Accepted Answer · 2016-12-24 08:10:20Z

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.

Collectives™ on Stack Overflow

Using SASS in Vue components the right way

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related